我试图让Divs随机出现在带有
javascript的网页上.所以一个div出现然后消失,然后另一个div出现在页面上的其他地方,然后消失,然后另一个div再次出现在页面上的另一个随机位置,等等.
我不知道如何生成随机单位的像素或使用什么技术来生成随机位置.
我不知道如何生成随机单位的像素或使用什么技术来生成随机位置.
我怎么做？这是我的代码：
var currentDivPosition = myDiv.offset(),myDivWidth = myDiv.width(),myDivHeight = myDiv.height(),var myDiv = $('<div>'),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 = $('<div/>').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();
});
})();
