在可替换图像上调用jQZoom
我正在创建一个电子商务产品页面，它将使用jQZoom作为放大特色产品图像的一种方式。 但是，我希望能够点击备用产品照片缩略图并让它不仅替换大的特色图像，而且还可以在新替换的特色图像上重新实例化jQZoom（）函数。
所有这一切都很好
问题是这个。 在页面加载时应用了jQZoom（）的原始特色图像仍然是一个“活着的工件”，当我hover（）替换的特色图像时，缩放效果应用于替换的图像和原始图像。
////////////////////////
产品页面
///////////////////////
/////////////////////////////////////////////
我的替换function
function SwapPic(image, image_big) { $(".jqZoomWindow").remove(); $(".jqZoomPup").remove(); $('img.feature').attr("src",image); $('#product-image a').attr("href",image_big).jqzoom({ zoomWidth: 330, zoomHeight: 330, showEffect:'show', hideEffect:'fadeout', fadeoutSpeed: 'slow', xOffset :72, title :false }); } 按照我们在jQuery函数中开始的主题似乎…… 您复制了很多代码，但JS不是一个完全面向对象的语言，我们可以应用一些技术来避免代码重复，并利用jQuery插件
我没时间测试脚本。 因此，如果有必要，您将拥有需要修改的内容。 我希望它能更好地满足您的需求。
如果你为我的妻子jjejeje买衣服会有一些折扣。
(function($) { $.fn.SwapPic = function(options) { options = $.extend({ zoomWidth: 330, zoomHeight: 330, showEffect:"show", hideEffect:"fadeout", fadeoutSpeed: "slow", xOffset:72, title:false, containerImgSmall: "", containerImgLarge: "", postAccion: null }, options || {}); options.pthis = this; options.accion = function() { imageSmall = $(options.pthis).attr("href"); //verifies this line imageLarge = $(options.pthis).attr("href").replace(/small/, "large"); //verifies this line options.containerImgSmall = $(options.containerImgSmall); options.containerImgLarge = $(options.containerImgLarge); //I do not know if it's necessary to do this if ($(".jqZoomWindow").length != 0) $(".jqZoomWindow").remove(); //I do not know if it's necessary to do this if ($(".jqZoomPup").length != 0) $(".jqZoomPup").remove(); options.containerImgSmall.attr("src", imageSmall); options.containerImgLarge.attr("href", imageLarge).jqzoom({ zoomWidth:options.zoomWidth, zoomHeight:options.zoomHeight, showEffect:options.showEffect, hideEffect:options.hideEffect, fadeoutSpeed:options.fadeoutSpeed, xOffset:options.xOffset, title:options.title }); if (options.postAccion!=null) options.postAccion.call(); }; $(this).bind("click", options.accion); }; })(jQuery); $(document).ready(function(){ var myPostAccion = function(){ $('#product-images li:first').fadeIn("slow"); }; $(".a-class-1").SwapPic({ containerImgSmall: "img.feature", containerImgLarge: "#product-image a", postAccion: myPostAccion }); $(".a-class-2").SwapPic({ zoomWidth: 530, zoomHeight: 530, containerImgSmall: "img.feature", containerImgLarge: "#product-image a", postAccion: myPostAccion }); });
HTML：
这是你如何从jqzoom清理数据：
$('.jqclass').removeData('jqzoom');
因为jqzoom将数据保存在此对象中：
$(el).data("jqzoom", obj);