1

这是我将要引用的网站的链接：

http://ellen-paul.com/interiorpage3_new3.html

所以我有一个简单的 javascript 图像查看器，它由一个主图像 (#largeimage) 和一组缩略图组成。当您单击缩略图时，主图像将更改为显示如下缩略图：

$("#largeimage").attr('src','images/interiorcontents3/4.JPG');

当用户单击图像时，我还使用脚本创建放大镜，问题是如果您在第一张图像上使用放大效果，然后单击缩略图以查看不同大小的图像并使用在该图像上也有放大镜，出现两个放大镜，每个图像一个。

这是放大镜和缩略图的java：

$("#imgbutton1").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/1.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/1.JPG');
        var imagewidth = $("#largeimage").width();
        $('#testcenter').css('marginLeft',-( imagewidth / 2));
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });

});

$("#imgbutton2").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/2.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/2.JPG');
        var imagewidth = $("#largeimage").width();
        $('#testcenter').css('marginLeft',-( imagewidth / 2));
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});

$("#imgbutton3").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/3.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/3.JPG');
        var imagewidth = $("#largeimage").width();
        $('#testcenter').css('marginLeft',-( imagewidth / 2));
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});

$("#imgbutton4").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/4.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/4.JPG');
        var imagewidth = $("#largeimage").width();
        $('#testcenter').css('marginLeft',-( imagewidth / 2));
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});

我已将放大镜脚本放在每个缩略图的函数中，以便每次都会执行，否则每次尝试使用放大镜时，它只会显示页面首次加载时的主图像 -解决了这个问题并创造了这个新的......

要查看故障，请转到此链接

http://ellen-paul.com/interiorpage3_new3.html

单击第二个缩略图并单击大图像以使用放大效果。然后单击第一个缩略图并对其使用放大效果 - 当您在它周围移动鼠标时，您会看到它同时显示两个图像的放大镜。

有什么建议么？？提前致谢！

4

1 回答 1

0

Zoomy 插件似乎缺少 destroy() 函数。每次单击时，您都会添加更多缩放元素的实例。

尝试添加$('.zoom').find('.zoomy').remove();到 zoomStop 回调。或者也许一个 hide() 就足够了（而不是 remove()）

于 2013-05-22T20:43:20.877 回答