放大镜javascript与图像矢量一起使用时出现毛刺
以下是我将引用的站点的链接：
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
单击第二个缩略图，然后单击大图像以使用放大效果。然后单击第一个缩略图并对其使用放大效果-您将看到，当您移动鼠标时，它会同时显示两个图像的放大镜。
有什么建议吗？提前感谢！
回答 1
Stack Overflow用户
发布于 2013-05-23 04:43:21
Zoomy插件似乎缺少一个destroy()函数。在每次单击时，您都会添加更多缩放元素的实例。
尝试向zoomStop回调中添加$('.zoom').find('.zoomy').remove();。或者可能一个hide()就足够了(而不是remove())
https://stackoverflow.com/questions/16701016
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号