1

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

我正在考虑使用 jQuery，因为我希望在翻转时使用以下内容：

  • 瓶子闪现瞬间明亮也会触发短声音文件。
  • 一两毫秒后，恢复正常状态。
  • 只有在模糊和重新鼠标悬停时才会重复动作。
  • 9 瓶中的每瓶效果相同。

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

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

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

4

2 回答 2

0

我最终完全没有使用 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>
于 2010-08-07T09:02:23.853 回答
0

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

如果您需要帮助来进行翻转，您可能会在此问题的答案中找到您要查找的内容。

于 2010-08-04T03:15:36.497 回答