JQuery Hover交换图像 - 不返回原始图像

时间:2014-01-23 04:05:31

标签: jquery image swap jquery-hover

我参加了几个JQuery教程并研究了缩略图悬停交换图像功能。最终我能够将其整合到我的客户网站中并且它正在工作!但是,当我悬停时,主图像不会返回到原始图像。

这是我的JQuery:

function myFunction(){
    jQuery('#thumbs img').hover(function(){
        jQuery('#largeImage').attr('src',jQuery(this).attr('src').replace('thumb','large'));
    });
}

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

我的主要图片是使用id = largeImage

我的缩略图包含在id = thumbs

的div中

除了返回原始图像之外,这里的页面工作正常: http://test.pillarsoflifebook.com/tables/tabletops/wood/solid-plank-oak/solid-plank-oak/

我似乎无法弄清楚如何合并.hover的mouseout回调函数。我在想我将largeimg src设置为变量并在mouseout函数中替换它。

非常感谢任何建议!谢谢!

1 个答案:

答案 0 :(得分:0)

尝试

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);
});

另一种方法

function myFunction() {
    var $large = jQuery('#largeImage');
    //you can also use a closure variable, if you don't want to change the default image in the same page you can use this one.
    //but if you want to change the default image using a function it won't work, in the first approach along with the src attribute if you change the data src that will work
    var src = $large.attr('src');
    jQuery('#thumbs img').hover(function () {
        $large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
    }, function () {
        $large.attr('src', src);
    });
}

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