jquery - 寻找 jQuery 版本的 Fireworks 'Swap Image'

Question

从 Fireworks 转向 jQuery 方式，需要实现 jQuery 版本的 FW 称为“交换图像”行为。我还看到使用了“脱节翻转”一词。这个版本不是简单地更改激活锚的图像源，还将交换未连接到当前/激活的其他“切片”（图像）的源。

Answer 1

我假设您会使用类选择器使用悬停方法来执行此操作。当您将鼠标悬停在集合上时，您会将集合中每个元素的 src 属性替换为图像的“悬停”版本。我使用集合中图像的相对位置来区分名称，但我想你可以保留一个名称数组或使用其他一些确定性算法。

  $('.swap').hover(
      function() {
          $('.swap').find('img').each( function(i) {
              $(this).attr('src','/path/to/image/img_hover' + i + '.png';
          },
      function() {
          $('.swap').find('img').each( function(i) {
              $(this).attr('src','/path/to/image/img' + i + '.png';
          }
      }
  });

HTML

<div class="swap">
   <img ...
   <img ...
   ...
</div>

Answer 2

您只需将这些图像添加到hover事件处理程序中：

$("image1").hover(function() {
     $("this").attr("src") = "newimage2.png";
     $("#image2").attr("src") = "newimage2.png";
};

我会给所有的图像命名，比如“slice-1.png”和id“slice-1”，这样你就可以使用一个不是一个接一个而是挂钩到所有带有id的图像的函数以“slice”开头，然后将 src 替换为所有人说“otherslice-1”或你有什么。

Answer 3

这是一个专门针对此的教程。通过在 Google 中输入“jQuery disjointed rollover”找到。