Question

此类脚本通常用于不同的管道（视频托管）。当用户将鼠标悬停在屏幕截图缩略图上时，该屏幕截图将替换为下一个屏幕截图，依此类推。当鼠标移出时，第一张图像显示在那里。我需要获得这种类型的脚本的名称（如翻转，轮播，幻灯片），以便在Google中查找。

Answer 1

“Rollover”最适合我认为您所描述的内容。您使用mouseover / mouseout或mouseenter / mouseleave事件（后者是特定于IE的，但jQuery在所有浏览器上提供它们，它们更容易有时使用）来接收您应该更改图像的通知，然后换出图像（通过分配到img元素的src属性，隐藏一个img元素并显示另一个，玩CSS游戏等 - 有很多方法。）

例如（live copy）：

HTML：

<p data-img="http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG">Mousing over this paragraph shows my gravatar.</p>
<p data-img="http://www.gravatar.com/avatar/8b12d17e2b54660de108a0995e1b5c3f?s=32&d=identicon&r=PG">Mousing over this one shows yours.</p>
<p>If you're not over either, we show Jon Skeet's.</p>
<img id="theImage" src="http://www.gravatar.com/avatar/6d8ebb117e8d83d74ea95fbdd0f87e13?s=48&d=identicon&r=PG">

JavaScript的：

jQuery(function($) {
  var img = $("#theImage"),
      defaultImg = img[0].src;
  $("p[data-img]")
    .mouseenter(function() {
      img[0].src = $(this).attr("data-img");
    })
    .mouseleave(function() {
      img[0].src = defaultImg;
    });
});

这只是一个非常非常基本的例子。通过仅使用页外的其他img元素（例如，style="position: absolute; left: -10000px"）或从中加载它们来预加载图像（我上面没有做过）也很常见。脚本（通过创建img元素并分配其src）。这样，当需要切换图像时，浏览器已经将图像放在缓存中，并且发生得非常顺利。

脚本的名称是什么？

1 个答案: