jQuery 翻转图像答案

【问题标题】：jQuery Rollover ImagejQuery 翻转图像
【发布时间】：2014-03-27 21:04:15
【问题描述】：

我有一个包含许多图像的页面，我想为它们使用翻转效果，即，当查看者将鼠标移到图像上时，图像源发生了变化。我试过这个 Change the image source on rollover using jQuery

但问题是我的图像位于不同的目录中。此外，图像文件名中有多个点。这与该网站是使用 bigcommerce 构建的有关。

有解决办法吗？

【问题讨论】：

【解决方案1】：

您可以使用您给出的示例中的函数，您只需要为两个图像传递正确的图像路径，而不仅仅是更改文件名。

$(function() {
    $("img")
        .mouseover(function() { 
            $(this).attr("src", "fullImageUrl/whateverOver.gif");
        })
        .mouseout(function() {
           $(this).attr("src", "fullImageUrl/whatever.gif");
        });
});

【讨论】：

谢谢 - 如果我希望原始图像具有不同的翻转图像怎么办？
您可以在这里做很多事情。如果需要，您可以将图像路径作为数据属性并以这种方式提取它们，或者在针对不同图像 ID 的 JS 中执行所有操作。

【解决方案2】：

该线程中的解决方案同样适用。只需更改此行中使用的 src 的值

$(this).attr("src", src);

分别指向第一个和第二个实例中翻转图片文件路径和常规图片文件路径的绝对路径。比如

var src = "../images/rolloverImages/abc.png";

而不是

var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";

【讨论】：