标签：box position 放大镜 11.17 height width big 400px
放大镜
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>
标签：box,position,放大镜,11.17,height,width,big,400px 来源： https://www.cnblogs.com/shuangjianga/p/15592755.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。