脚本的名称是什么?

What is the name of script?

本文关键字：是什么 脚本      更新时间：2023-09-26

这些脚本通常用于不同的管道(视频主机)。当用户将鼠标移到截图缩略图上时，该截图将替换为下一个截图，依此类推。当鼠标移出时，第一个图像显示在那里。我需要得到这种类型的脚本的名称，(如翻转，旋转木马，幻灯片)在谷歌寻找它。

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

例如(活拷贝):

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)。这样，当切换图像时，浏览器已经在缓存中保存了图像，并且切换非常顺利。

相关文章：