需要9排香水瓶的翻转效果

Question

对于调香师的网站，我在架子上展示一排九瓶。它显示为一张连续的照片。我将其切成九个无缝切片，每个切片都在自己的表格单元格中，并具有自己的 id。

我正在考虑使用 jQuery，因为我希望在翻转时实现以下效果：

• 瓶子闪电瞬间明亮也会触发短声音文件。
• 一两毫秒后，恢复正常状态。
• 仅当模糊并重新将鼠标悬停时，操作才会重复。
• 9 瓶效果相同。

鼠标按下（单击）可能不需要效果，只需将特定瓶子的页面定位到首页的 iframe 中即可。 我做了9个替代品。切片是白色的，但不知道如何编写具有定时效果的脚本。

闪光？请不要去那里；这让我简直疯了。 OTOH，我发现 jQuery 很优雅。

也许在翻转开始时在图像上暂时放置一个白色精灵会更容易？我该怎么做呢？ 非常感谢！

Answer 1

您有用于实现翻转图像的脚本吗？如果是这样，那么您需要添加的只是调用 jQuery 的 .delay() 以及禁用翻转图像的功能。有关 .delay() 函数的更多信息可以从 jQuery api。

如果您需要帮助进行滚动，您可能会在此问题<的答案中找到您想要的内容< /a>.

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>