放大镜javascript与图像查看器一起使用时出现故障

Magnifying glass javascript glitching when used with image veiwer

本文关键字：故障 一起 javascript 图像 放大镜      更新时间：2023-09-26

这里是我要引用的网站的链接:

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

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

$ (" # largeimage ") .attr("src"、"图像/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

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

有什么建议吗? ?提前感谢!

看起来Zoomy插件缺少一个destroy()函数。在每次点击时，您都在添加更多的zoomy元素实例。

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

相关文章：