javascript - div在javascript中的随机位置

Question

我正在尝试使用 javascript 使 Divs 随机出现在网页上的任何位置。所以一个 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);

Answer 1

这是一种方法。我在固定范围内随机改变 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(); 
    }); 
})();

编辑:为了好玩，添加了一种随机颜色。

编辑:添加了 .remove() 这样我们就不会用旧的 div 污染页面。

示例:http://jsfiddle.net/redler/QcUPk/8/