CSS：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content: ;}abbr,acronym{border:0;}body{padding:100px;}/*放大镜*/#J_ZoomMain {width:395px;height:460px;float:left;position:relative;}#J_ZoomMain .zoom {height:393px;width:393px; overflow:hidden;position:relative;border: 1px solid #dcdddd;}#J_ZoomMain .zoom img{display:block;}#J_ZoomMain .zoom .move{position:absolute;left:0; top:0;display:none; cursor:move;background: url(s.gif) repeat left top;/*opacity:0.2;filter:Alpha(Opacity=20);*/}#J_ZoomMain .zoomDetail{ visibility:hidden;border:1px solid #DCDDDD;width:393px; height:250px; position:absolute;right:-405px;top:0px; overflow:hidden;}#J_ZoomMain .zoomDetail img{ position:absolute; left:0; top:0;}.littleImg {margin-top:10px;height:54px;overflow:hidden;position:relative;}.littleImg span {position: absolute;display:block;width:10px;height:55px;background:#999;cursor:pointer;}.littleImg span em {display: none;width:10px;height:55px;}.littleImg span.btnL {left:0;background: url(UltimatePageCssPos.gif) no-repeat left top;}.littleImg span.btnL em {background: url(UltimatePageCssPos.gif) no-repeat left -57px;}.littleImg span.btnR em {background: url(UltimatePageCssPos.gif) no-repeat -10px -57px;}.littleImg span.btnR {right:0;background: url(UltimatePageCssPos.gif) no-repeat -10px top;}.littleImg span.hover em {display:block;}.littleImg .slideMain {width:343px;height:53px;margin-left:26px;overflow:hidden;position:relative;}.littleImg .slideMain ul {position:absolute;left:0;width:355px;padding-top:1px;}.littleImg .slideMain ul li {float:left;margin-right:6px;cursor:pointer;width:50px;height:50px;border:1px solid #dbdbdb;}.littleImg .slideMain ul li.selected {border-color:#f60;}.littleImg .slideMain ul li img {float:left;width:50px;height:50px;}/*放大镜end*/

　　DOM:

　　JS:

(function(){	/**	@基于jQuery的放大镜查看图片细节插件	@无需关注js的的内部实现，只要修改css即可达自由布局模式。	@内部实现了根据不同细节图的大小来自适应查看	@杨永	@QQ:377746756	@call:18911082352	@版本:1.0	*/	function JPZZoom(object){		var _this_=this;		//保存传进来的放大镜对象		this.zoomObject=object;		//保存放大镜的钩子		this.zoomHook=$(".J_ZoomHook",object);		//保存钩子图，也就是中图		this.hookImg=$("#J_ImagesHook",this.zoomHook);		//获取放大镜钩子区域的尺寸		this.hookClient={			width:this.zoomHook.width(),			height:this.zoomHook.height()		};		//保存钩子内的滑块		this.slider=$(".J_Slider",this.zoomHook);		//保存放大镜细节区域		this.detailBox=$("#J_ZoomDetail",object);		//获取放大镜细节区域的尺寸		this.detailClient={			width:this.detailBox.width(),			height:this.detailBox.height()		};		//保存细节图对象		this.detailImg=$("#J_ZoomDetailImage",this.detailBox);		//当默认的大图载入完成后执行函数内容		this.preLoadImg(this.detailImg.attr("src"),function(){			_this_.detailImgLoadedCallBack();		});		//绑定移动，移除，移入事件		this.zoomHook.mousemove(function(e){			//获取鼠标的坐标值			var x=_this_.getLayerPosition(this,e).layerX,y=_this_.getLayerPosition(this,e).layerY;			//驱动滑块的位置			_this_.setSliderPosition(_this_.getPracticalOffset(x,y).x,_this_.getPracticalOffset(x,y).y);				//驱动细节图位置			_this_.setDetailImgPosition(_this_.getPracticalOffset(x,y).x,_this_.getPracticalOffset(x,y).y);		}).mouseover(function(){			_this_.slider.show();			_this_.detailBox.css("visibility","visible");		}).mouseout(function(){			_this_.slider.hide();			_this_.detailBox.css("visibility","hidden");		});		//获取小预览图对象		this.imagesViewBox=$("#J_ImagesView");		//获取所有小图列表		this.viewList=this.imagesViewBox.find("img");		//绑定小图事件		this.viewList.click(function(){			_this_.setImgSrc($(this));		});		//获取小图列表的父节点的宽度		this.slideWrapWidth=$("#J_SlideWrap",object).width();		//获取单个小图的宽度		this.littleImgWidth=this.imagesViewBox.children().eq(0).width();		//获取小图的个数		this.littleImgSize=this.imagesViewBox.children().size();		//获取单个小图的margin值		this.littleImgMarginRight=parseInt(this.imagesViewBox.children().eq(0).css("marginRight"));		//如果小图已经溢出,就启用切换效果		if(this.isOverflow()){			//设置幻灯片的宽度			this.imagesViewBox.width((this.littleImgWidth+this.littleImgMarginRight)*(this.littleImgSize+1));			//获取左右切换按钮			this.btnL=$(".btnL",object);			this.btnR=$(".btnR",object);			//绑定事件			this.btnL.hover(function(){$("em",this).css("display","block")},function(){$("em",this).css("display","none")}).click(function(){				_this_.animateSlide(this);			});			this.btnR.hover(function(){$("em",this).css("display","block")},function(){$("em",this).css("display","none")}).click(function(){				_this_.animateSlide(this);			});		};	}	JPZZoom.prototype={		animateSlide:function(thisObj){			if($(thisObj).hasClass("btnL")){				this.imagesViewBox.css("left",-(this.littleImgWidth+this.littleImgMarginRight)+"px").children().last().prependTo(this.imagesViewBox);				this.imagesViewBox.animate({left:0});			}else{				this.imagesViewBox.animate({left:-(this.littleImgWidth+this.littleImgMarginRight)+"px"},function(){					$(this).css("left",0).children().eq(0).appendTo(this);				});			}		},		//判断小图列表是否超出，返回true/false		isOverflow:function(){			return ((this.littleImgWidth+this.littleImgMarginRight)*this.littleImgSize>this.slideWrapWidth)?true:false;		},		//设置中图，大细节图的src地址和更改选中样式		setImgSrc:function(thisObj){			var _this=this;			//拿到小图节点上的src地址			var hookSrc=thisObj.attr("medium-img"),				 detailSrc=thisObj.attr("large-img");			//设置hook钩子图片地址			this.hookImg.attr("src",hookSrc);			//当切换的细节大图加载完成后，执行替换src和执行detailImgLoadedCallBack();			this.preLoadImg(detailSrc,function(){				//替换掉细节图地址				_this.detailImg.attr("src",detailSrc);				//执行detailImgLoadedCallBack(),该函数是用来更改相关比例数据和设置滑块的尺寸;				_this.detailImgLoadedCallBack();			});			//切换选中样式			thisObj.parent().addClass("selected").siblings().removeClass("selected");		},		//图片加载器		preLoadImg:function(url,callBack){			var img=new Image();			if(!!window.ActiveXObject){					img.onreadystatechange=function(){						if(this.readyState=="complete"){									callBack();								};						};				}else{					img.οnlοad=function(){							callBack();						};					};			img.src=url;		},		//获取鼠标相对于当前元素的坐标		getLayerPosition:function(currentElement,evt){			return {					layerX:evt.pageX-$(currentElement).offset().left,					layerY:evt.pageY-$(currentElement).offset().top					};		},		//根据滑块的的尺寸获取实际能够驱动滑块的坐标		getPracticalOffset:function(x,y){			if(x<=this.sliderClient.width/2){				x=0			}else if(x>=(this.hookClient.width-this.sliderClient.width/2)){				x=this.hookClient.width-this.sliderClient.width;			}else{				x=x-this.sliderClient.width/2;			};			if(y<=this.sliderClient.height/2){				y=0			}else if(y>=(this.hookClient.height-this.sliderClient.height/2)){				y=this.hookClient.height-this.sliderClient.height;			}else{				y=y-this.sliderClient.height/2;			};			return {x:x,y:y};		},		//设置滑块的位置,同时返回滑块的坐标值		setSliderPosition:function(x,y){			this.slider.css({left:x+"px",top:y+"px"});		},		//设置细节图的位置		setDetailImgPosition:function(x,y){						this.detailImg.css({								left:-(x*this.getMultiple().XMultiple)+"px",								top:-(y*this.getMultiple().YMultiple)+"px"								});		},		//获取两者之间的关系倍数		getMultiple:function(){			return {					XMultiple:(this.detailImgClient.width-this.detailClient.width)/(this.hookClient.width-this.sliderClient.width),					YMultiple:(this.detailImgClient.height-this.detailClient.height)/(this.hookClient.height-this.sliderClient.height)			};		},		//设置滑块的尺寸		setSliderClient:function(){			/********************谷歌在解析这段的时候注意细节大图的尺寸问题infiny************************************************/			var multipleX=(this.hookClient.width)/(this.detailImgClient.width/this.detailClient.width),				multipleY=(this.hookClient.height)/(this.detailImgClient.height/this.detailClient.height);			this.slider.css({							width:multipleX+"px",							height:multipleY+"px"							});			//设置完成之后，充值默认尺寸			this.sliderClient={				width:this.slider.width(),				height:this.slider.height()			};		},		//切换大图时，当大图载入完毕后，执行函数		detailImgLoadedCallBack:function(){			//获取默认细节图的尺寸			this.detailImgClient={				width:this.detailImg.width(),				height:this.detailImg.height()			};			//根据比例倍数设置滑块的尺寸			this.setSliderClient();			//获取滑块的默认尺寸（设置完成的尺寸）			this.sliderClient={				width:this.slider.width(),				height:this.slider.height()			};		}	};	window["JPZZoom"]=JPZZoom;})();//创建放大镜$(function(){var zoom=new JPZZoom($("#J_ZoomMain"));});