使用鼠标悬停在另一个div中的图像上缩放图像

Question

有许多用于缩放图像的插件（如jqzoom）。但我希望在另一个div中悬停在图像上来缩放图像：

有没有办法像jqzoom（内部缩放）一样有效，但是鼠标悬停在另一个元素上？ 我想要这个效果：seavello.com/r/zoom/zoom.html，但鼠标悬停在thumbnial上而不是主图像上 提前致谢

Answer 1

如果href是大图像的网址，那么：

var big = $('.main img');
$('.tumb').mouseover(function() {
   big.attr('src', $(this).attr('href'));
}).mouseout(function() {
   big.attr('src', '');
});

你也可以在开始时预装图像。

var images = $.map($('.tumb'), function(item, index) {
   var img = new Image();
   img.src = item.attr('href');
   return img;
});

您还可以在悬停时添加动画。

Answer 2

试试这个

$(document).ready(function(){
    $('img').hover(
        function () { 
            $(this).animate({width: '+=10', height: '+=10'}, 500);
        },
        function () {
            $(this).animate({width: '-=10', height: '-=10'}, 500);
    });
});