我参加了几个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函数中替换它。
非常感谢任何建议!谢谢!
答案 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);
});