基于Jquery的放大镜(模仿淘宝的不同尺寸图片查看)
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:
<!--放大镜--> <div id="J_ZoomMain"> <div class="J_ZoomHook zoom"> <span class="J_Slider move"></span> <img id="J_ImagesHook" width="393" height="393" src="1347000569971.jpg" /> </div> <div class="littleImg"> <span class="btnL"><em></em></span> <span class="btnR"><em></em></span> <div id="J_SlideWrap" class="slideMain"> <ul id="J_ImagesView" class="clearfix"> <li class="selected"><img width="50" height="50" src="1347000569971.jpg" medium-img="1347000569971.jpg" large-img="1347000569971.jpg" /></li> <li><img width="50" height="50" src="1-130130221037.jpg" medium-img="1-130130221037.jpg" large-img="1-130130221037.jpg" /></li> <li><img width="50" height="50" src="fbb.jpg" medium-img="fbb.jpg" large-img="fbb.jpg" /></li> <li><img width="50" height="50" src="vf.jpg" medium-img="vf.jpg" large-img="vf.jpg" /></li> <li><img width="50" height="50" src="e.jpg" medium-img="e.jpg" large-img="e.jpg" /></li> <li><img width="50" height="50" src="ss.jpg" medium-img="ss.jpg" large-img="ss.jpg" /></li> <li><img width="50" height="50" src="vf.jpg" medium-img="vf.jpg" large-img="vf.jpg" /></li> </ul> </div> </div> <div id="J_ZoomDetail"class="zoomDetail"> <img id="J_ZoomDetailImage" src="1347000569971.jpg" /> </div> </div> <!--放大镜end-->
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.onload=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")); });