好资源导航 » 文章资讯 » js实现放大镜特效

js实现放大镜特效

2024-02-23 15:05:08 190

本文实例为大家分享了js放大镜特效的实现代码，供大家参考，具体内容如下





Document


*{
margin:0;
padding:0;
}
.imgBox{
width:1000px;
margin:auto;
text-align:center;
}
.small,.large{
font-size:0;
outline:1pxsolidburlywood;
margin:auto;
}
.small{
margin:20pxauto;
}
.large{
/*display:none;*/
}
.small,.smallimg,.large{
width:300px;
height:200px;
overflow:hidden;
}
.largeimg{
width:900px;
height:600px;
}
.small,.large{
position:relative;
}
.mark{
opacity:0.5;
background-color:#DEB887;
z-index:55;
width:100px;
height:66.666666666px;
display:none;
}
.mark,.largeimg{
position:absolute;
left:0;
top:0;
}

$(function(){ var$small=$(".small"), $mark=$(".mark"), $large=$(".large"); $small.on("mousemove",function(e){ //在鼠标移到小图片中显示出mark $mark.css("display","block"); //$large.css("display","block"); //获取mark的一半宽度高度 varhw=$mark.width()/2, hh=$mark.height()/2; //获取鼠标在当前图片中的位置 varlf=e.pageX-$small.offset().left-hw, tt=e.pageY-$small.offset().top-hh; //获取mark的想x,y轴偏移率 varix=lf/$small.width(), iy=tt/$small.height(); //获取边缘线 varlb=1-hw/$small.width()*2, tb=1-hh/$small.height()*2; //计算和边缘的关系 varix=ix0?ix:0:lb, iy=iy0?iy:0:tb; //进行大图和小图百分比计算 $mark.css("left",ix*100+"%").css("top",iy*100+"%"); $large.children().css("left",-ix*300+"%").css("top",-iy*300+"%"); }).on("mouseout",function(){ //鼠标移出后mark隐藏 $mark.css("display","none"); //$large.css("display","none"); }) })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

js实现放大镜特效

热门推荐

随机推荐