jQuery实现放大镜特效
效果图。
HTML页面中的代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #fang{ 8 position: absolute; 9 width: 100px; 10 height: 100px; 11 border-radius: 50px; 12 background-color: cornflowerblue; 13 display: none; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="test1"> 19 <img src="img/panda.jpg"width="800px"/> 20 <div id="fang"> 21 22 </div> 23 </div> 24 <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> 25 <script src="test_2.js" type="text/javascript" charset="utf-8"></script> 26 </body> 27 </html>
jQuery中的代码：
1 $(function(){ 2 //获得图片离浏览器顶端的距离 3 var top=$("#test1 img").position().top; 4 //获得图片离浏览器左端的距离 5 var left=$("#test1 img").position().left; 6 //鼠标在图片内部移动 7 $("#test1 img").mousemove(function(e){ 8 $("#fang").css({ 9 //此时鼠标的位置 10 "top":e.clientY+20+"px", 11 "left":e.clientX+20+"px", 12 //放大镜中的图片 13 "background-image":"url(img/panda.jpg)", 14 "background-size":"800px 450px", 15 "background-repeat":"no-repeat", 16 //调整放大镜中的图片的位置 17 "background-position":"-"+(e.clientX-left-51)+"px -"+(e.clientY-top-48)+"px", 18 //放大图片 19 "transform":"scale(1.5,1.5)" 20 }); 21 }); 22 //鼠标移进图片时显示放大镜 23 $("#test1 img").mouseenter(function(){ 24 $("#fang").show(); 25 }); 26 //鼠标移出图片时隐藏放大镜 27 $("#test1 img").mouseout(function(){ 28 $("#fang").hide(); 29 }); 30 });