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

JSFiddle链接：http://jsfiddle.net/58YWM/8/

让我知道它是否摇滚！

问候。

在随机位置创建重复元素

1 个答案: