技術標籤：前端

1、問題：

場景：一個大圖，下方是三個小圖；初始情況下大圖是第一個小圖，點選小圖，大圖顯示的圖片會進行切換；而這時候我們發現，放大鏡功能失效了。

該文章主要討論多圖失效問題，實現請找其他文章。

放大鏡實現是jqzoom外掛，下載相關包，匯入了js和css檔案後使用時遇到的問題。

2、解決

（1） 核心程式碼【在每次點選小圖後，發生的點選事件裡，js的click函式中】

			$(".jqZoomWindow").remove();//關鍵操作1
        	$(".jqZoomPup").remove(); //關鍵操作2
			$(".jqZoomPup").unbind(); //關鍵操作3
			$("#jqzoomIMG").unbind();
			$("#jqzoomIMG").unbind("jqzoom");       	
			    		$("#jqzoomIMG").jqzoom({ //繫結圖片放大外掛jqzoom
       			zoomWidth:200, //小圖片所選區域的寬
        		zoomHeight: 200, //小圖片所選區域的高
        		zoomType: 'standard', //設定放大鏡的型別，預設standard即選中的部分變灰，reverse即非選中變灰
       			 title: false   // 不要標題設為false
 

（2）完整程式碼

html部分

			<div>
				<a id="jqzoomIMG"  href=<%=mqt.get("tupian")%>  >
					<img id="goods_bimg" src=<%=mqt.get("tupian")%> jqzoom=<%=mqt.get("tupian")%>  alt="scarpa"  width=248 height=215 border=0>
				</a>
			</div>
			<div style="margin-top:5px;">
				<img id="goods_small1" class="goods_small active" src=<%=mqt.get("tupian")%>  alt="scarpa"  width=81 height=81 border=0>
				<img id="goods_small2" class="goods_small"  src=<%=mqt.get("tupian2")%>  alt="scarpa"  width=81 height=81 border=0>
				<img id="goods_small3" class="goods_small"  src=<%=mqt.get("tupian3")%>  alt="scarpa"  width=81 height=81 border=0>
			</div>	
 

js部分

$(function () {
    //這是一開始第一個預設小圖，也就大圖的初始化實現
    $("#jqzoomIMG").jqzoom({ //繫結圖片放大外掛jqzoom
        zoomWidth:200, //小圖片所選區域的寬
        zoomHeight: 200, //小圖片所選區域的高
        zoomType: 'standard', //設定放大鏡的型別，預設standard即選中的部分變灰，reverse即非選中變灰
        title: false   // 不要標題設為false
    });
    
    var goods_small1_src=$("#goods_small1").attr("src");
    var goods_small2_src=$("#goods_small2").attr("src");
    var goods_small3_src=$("#goods_small3").attr("src");
    $(".goods_small").live("click",function(){
    	$("#goods_small1").removeClass("active");
    	$("#goods_small2").removeClass("active");
    	$("#goods_small2").removeClass("active");
   

		$("#jqzoomIMG").empty();
		if(this.id=="goods_small1"){
			$("#goods_small1").addClass("active");
			$("#jqzoomIMG").attr("href",goods_small1_src);
			$("#jqzoomIMG").append("<img id='goods_bimg' src="+goods_small1_src+" alt='scarpa' width=248 height=215 border=0>");
			
			$(".jqZoomWindow").remove();//關鍵操作1
        	$(".jqZoomPup").remove(); //關鍵操作2
			$(".jqZoomPup").unbind(); //關鍵操作3
			$("#jqzoomIMG").unbind();
			$("#jqzoomIMG").unbind("jqzoom");       	
			    		$("#jqzoomIMG").jqzoom({ //繫結圖片放大外掛jqzoom
       			zoomWidth:200, //小圖片所選區域的寬
        		zoomHeight: 200, //小圖片所選區域的高
        		zoomType: 'standard', //設定放大鏡的型別，預設standard即選中的部分變灰，reverse即非選中變灰
       			 title: false   // 不要標題設為false
    		});

		}else if(this.id=="goods_small2"){
			$("#goods_small2").addClass("active");
			$("#jqzoomIMG").attr("href",goods_small2_src);
			$("#jqzoomIMG").append("<img id='goods_bimg' src="+goods_small2_src+" alt='scarpa' width=248 height=215 border=0>");
			
			$(".jqZoomWindow").remove();//關鍵操作1
        	$(".jqZoomPup").remove(); //關鍵操作2
			$(".jqZoomPup").unbind(); //關鍵操作3
			$("#jqzoomIMG").unbind();
			$("#jqzoomIMG").unbind("jqzoom");       	
			    		$("#jqzoomIMG").jqzoom({ //繫結圖片放大外掛jqzoom
       			zoomWidth:200, //小圖片所選區域的寬
        		zoomHeight: 200, //小圖片所選區域的高
        		zoomType: 'standard', //設定放大鏡的型別，預設standard即選中的部分變灰，reverse即非選中變灰
       			 title: false   // 不要標題設為false
    		});
			
		}else if(this.id=="goods_small3"){
			$("#goods_small3").addClass("active");
			$("#jqzoomIMG").attr("href",goods_small3_src);
			$("#jqzoomIMG").append("<img id='goods_bimg' src="+goods_small3_src+" alt='scarpa' width=248 height=215 border=0>");
			
			$(".jqZoomWindow").remove();//關鍵操作1
        	$(".jqZoomPup").remove(); //關鍵操作2
			$(".jqZoomPup").unbind(); //關鍵操作3
			//$("#jqzoomIMG").unbind();
			
			$("#jqzoomIMG").unbind();       	
			$("#jqzoomIMG").jqzoom({ //繫結圖片放大外掛jqzoom
       			zoomWidth:200, //小圖片所選區域的寬
        		zoomHeight: 200, //小圖片所選區域的高
        		zoomType: 'standard', //設定放大鏡的型別，預設standard即選中的部分變灰，reverse即非選中變灰
       			 title: false   // 不要標題設為false
    		});
		};
		
		
});
	
});