时间戳

首页 > 解决方案 > 约束div可以随机生成的空间，Jquery

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

问题描述

我在 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;
}

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

标签： jquerycssrandom

解决方案

您可能想用图像大小减去身体大小。

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

推荐阅读