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 });