在隨機位置創建重複元素

因爲我的上一個問題，位於here，目前在技術上是不可行的（html2canvas不能正確渲染我的元素，因爲它只需要'快照'），我採取了不同的方法。在隨機位置創建重複元素

本質上，當一個對象被點擊時，我希望它消失，然後它的多個較小版本隨機分散在屏幕上。所以，爲了簡單起見，請拍下一隻貓的圖像（cat.jpg）：點擊時，它應該看起來像是爆炸成三個較小的cat.jpg圖像，這些圖像被扔在屏幕上。同時，原始的cat.jpg被隱藏起來。

我（現在的全功能）代碼：

$('#cat').click(function() { 
    $(this).hide(); 
    for (var j = 1; j <= 3; j++) { 
     $('#content').append('<span><img class="cat" src="cat.jpg" /></span>'); 
    } 
    $('#cat').css("position", "relative"); 
    $('img.cat').each(function(i) { 
     var newTop = Math.floor(Math.random()*500)*((i%2)?1:-1); 
     var newLeft = Math.floor(Math.random()*500)*((i%2)?1:-1); 
     $(this).css({position: "relative", 
     top: 0, 
     left: 0 
     }).animate({ 
     top: newTop, 
     left:newLeft 
     }, 1000); 
    }); 
    });

我知道，目前不使他們更小，但如果我複製+隨機定位正確，我可以讓自己大小的因素之一的當前循環。無論如何，它是半工作的，但有沒有更好或更優雅的解決方案呢？

編輯：我更新了我的代碼，其版本實際上幾乎完全符合我的喜好，但我仍在尋求任何形式的建議和改進。我會將答案授予給我一個更好的方法的人。

來源

2014-01-05 daveycroqet

我去睡覺，但它似乎是一個封閉的問題。我知道這並不能幫助你，但它可以幫助未來的讀者回答你的問題。 – farvilain

你說得對，代碼很混亂，但我解決了關閉問題。現在的問題是.each循環不會異步執行，而是將最後的cat.jpg移動三次而不是一次。儘管謝謝你的幫助！ – daveycroqet

試試看：

// $(document).ready(function(){ - i'm omitting this i suppose you know where to put the code. 

var contW = $('#container').width(); 
var contH = $('#container').height(); 
var explode; 

$('.holder').click(explode=function() {  
    for (var j = 1; j <= 3; j++){   
     var sourceX = (Math.random()*contW)%(contW>>1); 
     var sourceY = (Math.random()*contH)%(contH>>1); 
     var nTop = Math.floor((Math.random()*contW)%contW); 
     var nLeft = Math.floor(((Math.random()*contH)%contH)); 
     var $child = $(this).clone();  

     $('#container').append($child); 
     $child.css({ top:sourceX, left: sourceY }) 
      .animate({ top: nTop+'px', left:nLeft+'px' }, 200) 
      .click(explode); 
    } 

    $(this).hide(); 
});

HTML小MOD：

<div id="container" style="width:400px; height:500px; background-color:yellow;"> 
    <div class="holder style="absolute; "><img class="cat" 
     src="http://jsfiddle.net/img/logo.png" 
     style="background-color:blue;" /> 
    </div> 
</div>

JSFidle鏈接在這裏：http://jsfiddle.net/58YWM/8/

讓我知道，如果它的岩石！

問候。

來源

2014-01-05 10:20:40

無法啓動它，但我想也許您還在更新它？無論哪種方式，真正感謝努力。 – daveycroqet

我在這裏爲JSFidle工作;） –

我想我忘了更新Fidle，所以我在這裏發佈的代碼不是Fidle中的代碼，這裏的代碼是最新的。抱歉。 –

在隨機位置創建重複元素

回答

相關問題