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

发布于 2024-08-06 23:48:44 字数 128 浏览 11 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

℉絮湮 2024-08-13 23:48:44

这是一个教程就是为了这个目的。通过在 Google 中输入“jQuery disjointed rollover”即可找到。

回复收藏 0 原文

前事休说 2024-08-13 23:48:44

我假设您会使用类选择器通过悬停方法来执行此操作。当您将鼠标悬停在集合上时，会将集合中每个元素的 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';
          }
      }
  });

超文本标记语言

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

I assume that you'd do this with a hover method using a class selector. When you hover over the collection, you replace the src attribute of each element in the set with the "hover" version of the image. I'm using the relative location of the image in the set to distinguish the names, but I suppose you could keep an array of names or use some other deterministic algorithm.

  $('.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>

回复收藏 0 原文

怎樣才叫好 2024-08-13 23:48:44

您只需将这些图像添加到 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”或您拥有的其他内容。

You would simply need to add whatever those images are to the hover event handler:

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

I would give all of the image names something like "slice-1.png" and the id "slice-1" so that you could go with a function that didn't go one by one but just hooked into all images with an id starting with "slice" and then replaces the src to all of them to say "otherslice-1" or what have you.

回复收藏 0 原文

~没有更多了~