本文实例为大家分享了js放大镜特效的实现代码，供大家参考，具体内容如下
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; } .imgBox{ width: 1000px; margin: auto; text-align: center; } .small,.large{ font-size: 0; outline: 1px solid burlywood; margin: auto; } .small{ margin: 20px auto; } .large{ /*display: none;*/ } .small,.small img,.large{ width: 300px; height: 200px; overflow: hidden; } .large img{ 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,.large img{ position: absolute; left: 0; top: 0; } </style></head><body> <div class="imgBox"> <div class="small"> <img src="img/img_14.jpg"/> <div class="mark"></div> </div> <div class="large"> <img src="img/img_14.jpg"/> </div> </div> <script type="text/javascript"> $(function(){ var $small = $(".small"), $mark = $(".mark"), $large = $(".large"); $small.on("mousemove",function(e){// 在鼠标移到小图片中显示出mark $mark.css("display","block");// $large.css("display","block");// 获取mark的一半宽度高度 var hw = $mark.width()/2, hh = $mark.height()/2;// 获取鼠标在当前图片中的位置 var lf = e.pageX-$small.offset().left-hw, tt = e.pageY-$small.offset().top-hh;// 获取mark的想x,y轴偏移率 var ix = lf/$small.width(), iy = tt/$small.height();// 获取边缘线 var lb = 1-hw/$small.width()*2, tb = 1-hh/$small.height()*2;// 计算和边缘的关系 var ix = ix<lb?ix>0?ix:0:lb, iy = iy<tb?iy>0?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"); }) }) </script></body></html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
新闻热点
疑难解答
