javascript - 脚本的名称是什么？

Question

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

Answer 1

“翻转”最符合我认为您所描述的内容。您使用 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)。这样，当需要切换图像时，浏览器已经将图像缓存在缓存中，并且会非常顺利地进行。