Question

目前我在我的主题的JS文件夹中有这个JQuery文档，允许我将鼠标悬停在图像上并将它们交换到特色图像，如下所示：

http://test.pillarsoflifebook.com/tables/tabletops/wood/rustic-plank-oak/rustic-plank-oak/

function myFunction() {
    var $large = jQuery('#largeImage');

    //store the default image as the data src
    $large.data('src', $large.attr('src'));

    var src = jQuery('#largeImage').attr('src');
    jQuery('#thumbs img').hover(function () {
        $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
    }, function () {
        //on mouse leave put back the original value
        $large.attr('src', $large.data('src'));
    });
}

jQuery(document).ready(function () {
    jQuery(myFunction);
});

对于我的客户端网站中的另一个页面，我需要相同的功能，而不会将特色图像返回到原始图像。因此..当您悬停并且特色图像发生变化时......当您再次悬停时，它需要保持更改。

我应该为此添加另一个脚本（几乎与微调相同）吗？

谢谢！

Answer 1

使用此代码

function myFunction() {
    var $large = jQuery('#largeImage');

    //store the default image as the data src
    //$large.data('src', $large.attr('src'));

    var src = jQuery('#largeImage').attr('src');
    jQuery('#thumbs img').hover(function () {
        $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
    }, function () {
        //on mouse leave put back the original value
        $large.attr('src', $large.data('src'));
    });
}

jQuery(document).ready(function () {
    jQuery(myFunction);
});

我应该解释一下吗？

Answer 2

只需删除放回原始图片的代码

    function myFunction() {
    var $large = jQuery('#largeImage');

    //store the default image as the data src
    $large.data('src', $large.attr('src'));

    var src = jQuery('#largeImage').attr('src');
    jQuery('#thumbs img').hover(function () {
        $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
    }, function () {
        //on mouse leave put back the original value
        //$large.attr('src', $large.data('src'));
    });
}

jQuery(document).ready(function () {
    jQuery(myFunction);
});

用于悬停图像交换的JQuery - 需要简单调整

2 个答案: