9排香水瓶需要翻滚效果

Question

在一个香水公司的网站上，我在架子上展示了一排九瓶酒。它看起来像一张连续的照片。我已经把它切成九个无缝的切片，每个都在自己的表格单元格中，都有自己的id。

我正在考虑使用jQuery，因为我想在滚动中使用以下内容：

• 瓶子闪电战瞬间亮也触发短音效文件。
• 一两毫秒后，恢复正常状态。
• 行动只有在模糊和重复时才会重复.
• 9瓶中的每一瓶效果相同。

鼠标向下(点击)可能不需要一个效果，只是针对特定的瓶子的页面进入首页的iframe。我已经做了9次了。白纸黑字的切片，但不知道如何编写具有时间效果的脚本。

闪光灯？求你了，别去那儿，这让我简直疯了。哦，我觉得jQuery很优雅。

也许，在滚动开始的时候，在图像上放置一个白色的精灵会更容易吗？我该怎么做？事先非常感谢！

Answer 1

您有脚本来实现滚动映像吗？如果是这样的话，那么您只需要添加一个对jQuery的.delay()的调用，它的功能是禁用滚动映像。关于.delay()函数的更多信息是可用的来自jQuery api。

如果你需要帮助，你可以在这个问题的答案中找到你想要的答案。

Answer 2

最后，我在没有任何jQuery的情况下完成了这一任务:只是直接使用Javascript。在Javascript代码中，您需要两个函数来处理图像：

function imgOn(id) {
    document.getElementById(id).src = 'img_on.jpg';
    setTimeout("imgOff('"+id+"')",1000);
}

function imgOff(id) {
    document.getElementById(id).src = 'img_off.jpg';
}

这里的关键部分是正确设置图像文件并设置所需的超时。用白瓶的文件名替换img_on.jpg，用普通瓶的文件名替换img_off.jpg。另外，它被设置为1秒后恢复。若要调整此时间，请将1000更改为不同的值。

然后，当您实际显示图像时，使用以下HTML：

<span onMouseOver="imgOn('img1');" onMouseOut="imgOff('img1');">
  <img id="img1" src="img_off.jpg">
</span>

确保每个图像都有一个唯一的id值，并且您用于id的值也用于onMouseOver和onMouseOut调用中。如果这些图像用作链接，则可以使用以下内容：

<a href='page.html' onMouseOver="imgOn('img1');" onMouseOut="imgOff('img1');">
  <img id="img1" src="img_off.jpg">
</a>