/*放大镜*/
.ZoomMain {
margin:100px;
width:395px;
height:460px;
float:left;
position:relative;
}
.ZoomMain .zoom {
height:393px;
width:393px;
position:relative;
border: 1px solid #dcdddd;
}
.ZoomMain .zoom .move{position:absolute;left:0; top:0;display:none;width:200px; height:200px;background:#000;opacity:0.2;filter:Alpha(Opacity=20);}
.ZoomMain .zoomDetail{display:none;border:1px solid red;width:393px; height:393px; position:absolute;right:-405px;top:0px; overflow:hidden;}
.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(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left top;
}
.littleImg span.btnL em {
background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left -57px;
}
.littleImg span.btnR em {
background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat -10px -57px;
}
.littleImg span.btnR {
right:0;
background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat -10px top;
}
.littleImg span.hover em {
display:block;
}
.littleImg .slideMain {
width:343px;
height:55px;
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:#999;
}
.littleImg .slideMain ul li img {
float:left;
width:50px;
height:50px;
}
/*放大镜end*/
<!--放大镜-->
<div class="ZoomMain">
<div class="zoom">
<span class="move"></span>
<img width="393" height="390" src="1347000569971.jpg" />
</div>
<div class="littleImg">
<span class="btnL hover"> <em></em></span>
<span class="btnR"> <em></em></span>
<div class="slideMain">
<ul 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="1347000590691.jpg" medium-img="1347000569971.jpg" large-img="1347000569971.jpg" /></li>
</ul>
</div>
</div>
<div class="zoomDetail">
<img src="1347000569971.jpg" />
</div>
</div>
<!--放大镜end-->
(function(){
function Zoom(object){
this.zoomArea=$(".zoom",object);//保存促发放大效果的区域
this.moveArea=$(".move",object);//保存移动区域
this.zoomDetail=$(".zoomDetail",object);//保存放大镜区域
this.zoomDetailImg=$("img",this.zoomDetail);//保存放大镜里面的图
this.zoomAreaWidth=this.zoomArea.width();
this.moveAreaWidth=this.moveArea.width();
this.zoomAreaHeight=this.zoomArea.height();
this.moveAreaHeight=this.moveArea.height();
this.zoomDetailWidth=this.zoomDetail.width();
this.zoomDetailHeight=this.zoomDetail.height();
this.zoomAreaOffset=this.zoomArea.offset();//初始化放大区域在视口中的相对偏移;
this.XY=null;//初始化鼠标相对于放大区域的偏移偏移值
this.moveBili=null;//
var _this_=this;
this.zoomArea.mousemove(function(e){//当鼠标在放大区域移动的时候执行
_this_.move(e.pageX,e.pageY);
}).mouseover(function(){
_this_.moveArea.show();
_this_.zoomDetail.show();
}).mouseout(function(){
_this_.moveArea.hide();
_this_.zoomDetail.hide();
});
this.calculate();//初始化并计算出
};
Zoom.prototype={
move:function(x,y){//鼠标在放大区域移动的时候执行的函数
this.XY=this.mousePosAndSetPos(x,y);//计算出鼠标相对于放大区域的x,y值
//设置滑块的位置
this.moveArea.css({
left:this.XY.offsetX+"px",
top:this.XY.offsetY+"px"
});
//设置大图在细节位置
this.zoomDetailImg.css({
marginLeft:-this.XY.offsetX*this.moveBili+"px",
marginTop:-this.XY.offsetY*this.moveBili+"px"
});
},
mousePosAndSetPos:function(x,y){//实时计算并设置滑块的位置
x=x-this.zoomAreaOffset.left-this.moveArea.width()/2;
y=y-this.zoomAreaOffset.top-this.moveArea.height()/2
x=x<0?0:x;
y=y<0?0:y;
x=x>(this.zoomAreaWidth-this.moveAreaWidth)?this.zoomAreaWidth-this.moveAreaWidth:x;
y=y>(this.zoomAreaHeight-this.moveAreaHeight)?this.zoomAreaHeight-this.moveAreaHeight:y;
return {
offsetX:x,
offsetY:y
};
},
calculate:function(){
var widthBili,heightBili;
//计算移动的滑块与放大镜铺面显示的比例宽高
widthBili=(this.zoomAreaWidth*this.zoomDetailWidth)/this.moveAreaWidth;
heightBili=(this.zoomAreaHeight*this.zoomDetailHeight)/this.moveAreaHeight;
//把比出来的宽高
this.zoomDetailImg.css({width:widthBili+"px",height:heightBili+"px"});
//返回移动的比例
this.moveBili=(widthBili-this.zoomDetailWidth)/(this.zoomAreaWidth-this.moveAreaWidth);
}
};
var zoom=new Zoom($(".ZoomMain").eq(0));
})();