Question

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

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

单击第二个缩略图，然后单击大图以使用放大效果。然后单击第一个缩略图并使用它上面的放大效果 - 当您移动鼠标时，您会看到它同时显示两个图像的magenfying玻璃。

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

Answer 1

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

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

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

1 个答案: