javascript - 在随机位置创建重复元素

Question

由于出现我之前的问题，位于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);
    });
  });

我知道这目前不会让它们变小，但如果我正确地完成了复制 + 随机定位，我就可以让它们的大小成为当前循环的一个因素。无论如何，它是半工作的，但是有更好或更优雅的解决方案吗？

编辑:我更新了我的代码，版本几乎完全符合我的要求，但我仍在寻求任何类型的建议和改进。我会将答案奖励给任何向我展示更好方法的人。

Answer 1

试一试:

// $(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 小模组:

<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>

JSFiddle 链接在这里:http://jsfiddle.net/58YWM/8/

如果成功了请告诉我!

问候。