Question

从Fireworks迁移到jQuery Way并需要实现FW称之为“交换图像”行为的jQuery版本。我也看过“脱节滚动”一词。此版本不会简单地更改激活锚点的图像源，也会交换未连接到当前/激活的其他“切片”（图像）的源。

Answer 1

这是一个tutorial。通过在Google中输入“jQuery脱节滚动”找到。

Answer 2

我假设您使用类选择器的悬停方法执行此操作。将鼠标悬停在集合上时，可以使用图像的“悬停”版本替换集合中每个元素的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 3

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

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

我会给所有的图像名称提供类似“slice-1.png”和id“slice-1”的信息，这样你就可以使用一个一个接一个的函数但只是挂钩到所有图像中以“slice”开头的id，然后将src替换为所有人，说“otherslice-1”或者你有什么。

寻求jQuery的Fireworks“交换图像”版本

3 个答案: