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"));
});