Question

我看了http://wonderwall.msn.com的来源，并注意到墙块的所有跨度标签似乎都没有与任何ID相关联。这让我非常好奇当你点击其中一个没有相关ID的块/图像时，他们如何能够完成元素的动画重新定位。

我很好奇你如何点击说出一张图片并让周围的其他图像移动到一边。是某种公式还是算法？

我想说完，5个跨度/块，点击一个，让其他人动画/移动到两侧。

Answer 1

ID不是必需的，通常也是有害的。您不需要它们，生成或以其他方式。

当你在一个带有ID的页面上放置一个元素时，你会声称应该只有一个元素。很少这是真的。更常见的是，您想要做的是将某些行为与页面上的某些元素相关联，其中可能有许多，一个或零。

在这种情况下，有很多小的图像处理，点击时，重新排列自己。我没有一个算法来计算它们应该如何移动，但是这里有一个框架，可以用jQuery来实现相同的效果。

// create jQuery plugin for highlighting and shuffling brick dealies
(function($){

  function expandify() {
    var href = this.attr('href');
    // create a popup containing the href
    return this;
  }

  function shuffle() {
    this.each(function(index, elem){
      // calculate new position and move the element there.
    });
    return this;
  }

  $.fn.expandify = expandify;
  $.fn.shuffle = shuffle;

})(jQuery);

// attaches behaviors to elements on the page after they've loaded
// either $.ready, or window onload, or after some ajaxing takes place
$('.wallBrick')
  .click(function(e){

    $(e.target)
      .expandify();

    $('.wallBrick')
      .not(e.target)
      .shuffle();

  });

Answer 2

ID是通过JavaScript即时生成的。您不会在源代码中看到它，但如果您使用Firebug进行检查，则会看到它。

使用javascript / jquery重新排列图像/ div的定位的最佳方法？

2 个答案: