1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style> 8 #smallImg { 9 position: absolute; 10 left: 50px; 11 top: 100px; 12 } 13 #smallImg, #smallImg img { 14 200px; 15 height: 200px; 16 } 17 #smallArea { 18 display: none; 19 50px; height: 50px; background: rgba(200, 222,111, 0.3); 20 position: absolute; left: 50px; top: 0; 21 } 22 23 #bigArea { 24 display: none; overflow: hidden; 25 300px; height: 300px; background: rgba(200,111,222,0.3); 26 position: absolute; left: 300px; top: 100px; 27 } 28 #bigImg { 29 800px; height: 800px; 30 position: absolute; left: 0; top: 0; 31 } 32 33 </style> 34 35 <script type="text/javascript" src="js/jquery-1.12.3.js" ></script> 36 <script> 37 $(function(){ 38 39 //等比公式 40 //小图width/大图width == 小区域width/大区域width 41 $("#smallArea").width( $("#smallImg").width() * $("#bigArea").width() / $("#bigImg").width() ); 42 $("#smallArea").height( $("#smallImg").height() * $("#bigArea").height() / $("#bigImg").height() ); 43 44 //放大系数 45 var scale = $("#bigImg").width() / $("#smallImg").width(); 46 47 //在小图中移动 48 $("#smallImg").mousemove(function(e){ 49 $("#smallArea").show(); //显示小区域 50 $("#bigArea").show(); //显示大区域 51 52 53 var x = e.pageX - $("#smallImg").offset().left - $("#smallArea").width()/2; 54 var y = e.pageY - $("#smallImg").offset().top - $("#smallArea").height()/2; 55 56 //控制不超出左右边界 57 if (x < 0){ 58 x = 0; 59 } 60 else if (x > $("#smallImg").width()-$("#smallArea").width()){ 61 x = $("#smallImg").width()-$("#smallArea").width(); 62 } 63 //控制不超出上下边界 64 if (y < 0){ 65 y = 0 66 } 67 else if (y > $("#smallImg").height()-$("#smallArea").height()) { 68 y = $("#smallImg").height()-$("#smallArea").height(); 69 } 70 71 //小区域移动 72 $("#smallArea").css({left:x, top:y}); 73 74 //大图移动 75 $("#bigImg").css({left: -scale*x,top: -scale*y}); 76 }) 77 78 //移除小图 79 $("#smallImg").mouseleave(function(){ 80 $("#smallArea").hide(); //隐藏小区域 81 $("#bigArea").hide(); //隐藏大区域 82 }) 83 }) 84 </script> 85 </head> 86 <body> 87 <div id="smallImg"> 88 <img src="images/星际穿越.jpg" /> 89 <div id="smallArea"></div> 90 </div> 91 <div id="bigArea"> 92 <img id="bigImg" src="images/星际穿越.jpg" /> 93 </div> 94 </body> 95 </html>
