向元素添加隨機邊距

Question

我想爲每個元素添加一個隨機生成的邊距左邊距和邊距頂點值，但是在一個範圍內。

介於-50px和0px和50px之間。每次刷新時創建不同的交錯和重疊外觀

<div class="thumbnail" style="margin-top:55px; margin-left: -20px;"> 
<p>content</p> 
</div> 

<div class="thumbnail" style="margin-top:-20px; margin-left: 40px; "> 
<p>content</p> 
</div> 

<div class="thumbnail" style="margin-top:70px; margin-left: 2px;"> 
<p>content</p> 
</div> 

任何建議都會很棒。

Answer 1

你可以這樣做：

function randomMargin(){ 
    var randomnumber1=Math.floor(Math.random()*101) - 50; 
    var randomnumber2=Math.floor(Math.random()*101) - 50; 
    $('.thumbnail').css({"margin-top": randomnumber1+"px", "margin-left": randomnumber2+"px"}); 
} 

setInterval(randomMargin, 1000); 

小提琴這裏http://jsfiddle.net/dnxFn/1/

編輯多個對象和邪惡的效果：

function randomMargin(){ 
    $('.thumbnail').each(function(){ 
     randomizeObject(this); 

    }); 

} 

function randomizeObject(el){ 
    var randomnumber1=Math.floor(Math.random()*101) - 50; 
    var randomnumber2=Math.floor(Math.random()*101) - 50; 
    $(el).css({"margin-top": randomnumber1+"px", "margin-left": randomnumber2+"px"}); 
} 

setInterval(randomMargin, 1000); 

這裏小提琴http://jsfiddle.net/dnxFn/2/

編輯-2這一個是迄今爲止最好看的http://jsfiddle.net/dnxFn/4/

Answer 2

試試這個：

$('.thumbnail').each(function() { 
    $(this).css({ 
    'margin-top': Math.floor(Math.random() * 100 - 50) + 'px', 
    'margin-left': Math.floor(Math.random() * 100 - 50) + 'px' }); 
}); 

HERE是代碼。

這將爲類thumbnail的每個元素設置margin-top和margin-left樣式。由Math.random()返回的值爲[0，1），因此計算的數字將在範圍[-50,50）內。

編輯：尼古拉Peluchetti使用Math.floor(Math.random() * 101) - 50這將在範圍生成數字[-50，50]（這樣它可以產生還+ 50像素容限）。用那個:)。