javascript中div的随机位置
我试图让Divs随机出现在网页上的任何地方使用javascript。 所以div出现然后消失，然后另一个div出现在页面上的其他地方然后消失，然后另一个div再次出现在页面上的另一个随机点然后消失，依此类推。 我不确定如何生成像素中的随机单位或用于生成随机位置的技术。
我怎么做？ 这是我的代码：
var currentDivPosition = myDiv.offset(), myDivWidth = myDiv.width(), myDivHeight = myDiv.height(), var myDiv = $(''), finalDivPositionTop, finalDivPositionLeft; myDiv.attr({ id: 'myDivId', class: 'myDivClass' }); // already defined with position: absolute is CSS file. // Set new position finalDivPositionTop = currentDivPosition.top + Math.floor( Math.random() * 100 ); finalDivPositionLeft = currentDivPosition.left + Math.floor( Math.random() * 100 ); myDiv.css({ // Set div position top: finalDivPositionTop, left: finalDivPositionLeft }); $('body').append(myDiv); myDiv.text('My position is: ' + finalDivPositionTop + ', ' + finalDivPositionLeft); myDiv.fadeIn(500); setTimeout(function(){ myDiv.fadeOut(500); myDiv.remove(); }, 3000);
这是一种方法。 我在固定范围内随机改变div的大小，然后设置位置，使对象始终位于当前窗口边界内。
(function makeDiv(){ // vary size for fun var divsize = ((Math.random()*100) + 50).toFixed(); var color = '#'+ Math.round(0xffffff * Math.random()).toString(16); $newdiv = $('').css({ 'width':divsize+'px', 'height':divsize+'px', 'background-color': color }); // make position sensitive to size and document's width var posx = (Math.random() * ($(document).width() - divsize)).toFixed(); var posy = (Math.random() * ($(document).height() - divsize)).toFixed(); $newdiv.css({ 'position':'absolute', 'left':posx+'px', 'top':posy+'px', 'display':'none' }).appendTo( 'body' ).fadeIn(100).delay(1000).fadeOut(500, function(){ $(this).remove(); makeDiv(); }); })();
编辑：为了好玩，添加了随机颜色。
编辑：添加了.remove()因此我们不会使用旧的div污染页面。
示例： http ： //jsfiddle.net/redler/QcUPk/8/
假设你有这个HTML：
test div
这个CSS：
#test { position:absolute; width:100px; height:70px; background-color:#d2fcd9; }
使用jQuery，如果你使用这个脚本，每当你点击div时，它会在文档中随机定位：
$('#test').click(function() { var docHeight = $(document).height(), docWidth = $(document).width(), $div = $('#test'), divWidth = $div.width(), divHeight = $div.height(), heightMax = docHeight - divHeight, widthMax = docWidth - divWidth; $div.css({ left: Math.floor( Math.random() * widthMax ), top: Math.floor( Math.random() * heightMax ) }); });
这种方式的工作方式是……首先计算document宽度和高度，然后计算div宽度和高度，然后从document宽度和document高度的div高度中减去div宽度，并考虑像素范围你愿意把div放入（因此它不会溢出文档）。 如果div上有填充和边框，则还需要考虑这些值。 一旦你计算出范围，你就可以通过Math.random()轻松地对其进行多重处理，并找到div的随机位置。
再一次：首先找到容器的尺寸，然后找到元素的尺寸，然后从容器尺寸中减去元素尺寸，然后在该值上使用Math.random() 。
基本思想是封装在这里：
一些错误：
- 你错过了绝对的位置。 否则它将无法工作。
- 我认为你需要广告’px’到数字。
- 地图由字符串组成
正好在你的jQuery css设置中：
myDiv.css({ 'position' : 'absolute', 'top' : finalDivPositionTop + 'px', 'left' : finalDivPositionLeft + 'px' });
我为我们的网站更改了一个存在的代码，你可以在tweefox.nc上看到它