Question

我在Jquery中有一个元素，它使用鼠标悬停事件将图像移动到页面上的随机位置：

$('#rand_pos').mouseover(function() {
 var bodyWidth = document.body.clientWidth
 var bodyHeight = document.body.clientHeight;
 var randPosX = Math.floor((Math.random() * bodyWidth));
 var randPosY = Math.floor((Math.random() * bodyHeight));
 // var posLog = document.getElementById('pos_log');
 var posXY = 'x: ' + randPosX + '<br />' + 'y: ' + randPosY;

$('#rand_pos').css('left', randPosX);
$('#rand_pos').css('top', randPosY);

我不希望图像跳出屏幕到用户必须滚动到的位置。由于包含图像的div位于body标签中，因此我将其放在样式表中：

body {
max-height: 800px;
max-width: 1280px;
}

但是图像不断生成我定义的高度和宽度之外的区域。有谁知道为什么？

Answer 1

您可能希望使用图像尺寸减去体型。

var h = $('#rand_pos').height()
var w = $('#rand_pos').width()    

var bodyWidth = document.body.clientWidth - w;
var bodyHeight = document.body.clientHeight - h;
var randPosX = Math.floor((Math.random() * bodyWidth));
var randPosY = Math.floor((Math.random() * bodyHeight));

在这里，我让您使用示例代码将图像移动到随机位置，但在悬停时仍然在身体内部。

http://jsbin.com/nuzayenoko/1/edit

约束div可以随机生成的空间，Jquery

1 个答案: