將div添加到窗口內的隨機位置

好吧，我有這樣的代碼，其中每2秒將正文中div的數量加倍到body中。但是我希望這個div位於視口內的一個隨機位置，我可以如何實現它？只有在我的代碼中的第一個div實際上是在隨機位置，每次休息只是疊加起來，離開這裏的視顯示是的jsfiddle：將div添加到窗口內的隨機位置

http://jsfiddle.net/hy4fq/2/

<!doctype html> 
<html> 
<head> 
<title>jQuery Project: An exploding game</title> 
<meta charset="utf-8"> 
<style> 
body, html { 
width: 960; 
height: 500%; 
} 
div.box { 
position: relative; 
width: 100px; 
height: 100px; 
background-color: orange; 
} 
div.exploding { 
position: absolute; 
width: 100px; 
height: 100px; 
background-color: red; 
} 
</style> 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"> </script> 
<script> 
$(document).ready(function(){ 
$("body").append("<div class='box'></div>"); 
    // add new div *2 
    $("div.box").each(function() { 
      var numRand = Math.floor(Math.random()*501); 
      $(this).css({'margin-left': numRand}); 
       setInterval(function()    {$(".box").clone().appendTo("body");}, 3000); 

}) 

    }); 





</script> 
</head> 
<body> 
</body> 
</html>

來源

2013-08-07 Rodrigo Lessa

下面是使我這個答案的鏈接：random position of divs in javascript

首先，你需要每一個函數被調用時更新隨機值。在你的例子中，它在每個函數中，如果你看看開發者工具，你會發現它只是第一次設置這個值。其次，如果你想把div放在視口內，在出現的div上使用position：absolute比position：relative（在這種情況下）更好，因爲如果你使用相對位置，body的高度可能會增加每次添加一個div。

function makeDiv() { 
     var numRand = Math.floor(Math.random() * 501); 
     var divsize = 100; 
     var posx = (Math.random() * ($(document).width() - divsize)).toFixed(); 
     var posy = (Math.random() * ($(document).height() - divsize)).toFixed(); 
     $newdiv = $("<div class='exploding'></div>").css({ 
      'left': posx + 'px', 
       'top': posy + 'px' 
     }); 
     $newdiv.appendTo('body').delay(2000).fadeIn(100, function() { 
      //$(this).remove(); 
      makeDiv(); 
     }); 
    }

下面是它的工作演示：http://jsfiddle.net/hy4fq/3/

來源

2013-08-07 19:21:47

Thnak你現在唯一的問題是，它只是在一個時間不是雙頁面上的div量增加一個格但我確定我能得到它與您的代碼一起工作我appriciate您的幫助！ –

沒問題。祝你好運！ –

您需要及時重新定義numbRand，這只是被定義一次然後用於每個div。也許創建另一個函數並返回numbRand，然後每次調用它，每次都會調用一個隨機數。

來源

2013-08-07 18:35:40 Seano666

將div添加到窗口內的隨機位置

回答

相關問題