放大镜

HTML代码

<div class="album-details-main clearfix mb20">
<!--details-left-->
<div class="details-left fl">
<!--<div class="pics-box">
<img src="img/pro/7_418x418.jpg"/>
</div>-->
<div class="pics-box">
<div class="small_box">
<span class="mask"></span>
<span class="float_layer"></span>
<img src="img/pro/7_418x418.jpg">
</div>
<div class="big_box">
<img src="img/pro/7_800x800.jpg">
</div>
</div>
<div class="like">
<span class="like-icon"></span>
<i class="like-num">0</i>
</div>
<div class="pic-slide">
<img src="img/details-i.png"/>
</div>
</div>

css代码

/*放大镜功能样式*/
.pics-box{position:relative;}
.small_box{width:400px;height:400px;border:1px solid #ddd;}
.small_box img{width: 100%;}
.small_box .mask{position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.5);opacity:0;z-index:2;cursor:move;}
.small_box .float_layer{position:absolute;width:200px;height:200px;background:rgba(0,0,0,0.5);display:none;}
.big_box{position:absolute;left:400px;top:0;width:400px;height:400px;overflow:hidden;display:none; border:1px solid #ddd;}
.big_box img{position:absolute;}

jQuery代码

<script type="text/javascript">
// 放大镜
$(".mask").hover(function(){//当鼠标悬挂上时显示
$(".float_layer").show()
$(".big_box").show();
},function(){//否则隐藏
$(".float_layer").hide()
$(".big_box").hide()
}).mousemove(function(e){//显示鼠标的位置（通过XY轴进行计算）
var x=e.offsetX-100;//左
var y=e.offsetY-100;//上
var w=$(this).width();//右
var h=$(this).height();//下
if(y<0)
y=0;
if(x<0)//
x=0;
if(e.offsetX+100>=w){
x=w-200;
}
if(e.offsetY+100>=h){
y=h-200;
}
$(".float_layer").css({
left:x+"px",
top:y+"px"
})
$(".big_box img").css({
left:-2*x+"px",
top:-2*y+"px"
})
// screenx|y整个页面
// offset

})
})

</script>