效果图：
不废话直接上代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>test</title> 6 <style type="text/css"> 7 * { 8 padding: 0; 9 margin: 0; 10 } 11 ul{ 12 position: relative; 13 width: 500px; 14 /*height: 500px;*/ 15 margin: 50px; 16 } 17 li{ 18 width: 500px; 19 height: 500px; 20 /*position: absolute;*/ 21 } 22 .div { 23 border: 1px solid; 24 position: relative; 25 /*margin: 50px;*/ 26 height: 500px; 27 width: 500px; 28 } 29 30 .div img { 31 width: 500px; 32 height: 500px; 33 } 34 35 .span { 36 width: 100px; 37 height: 100px; 38 position: absolute; 39 background: red; 40 display: none; 41 cursor: all-scroll; 42 opacity: 0.1; 43 44 } 45 46 .show { 47 height: 550px; 48 width: 550px; 49 position: relative; 50 left: 502px; 51 top: -505px; 52 overflow: hidden; 53 /*display: none;*/ 54 } 55 56 .show img { 57 position: absolute; 58 width: 1500px; 59 height: 1500px; 60 } 61 62 </style> 63 </head> 64 <body> 65 66 <ul> 67 68 <li > 69 <div class="div"> 70 <img src="sjxq01_boom.jpg"> 71 <span class="span"></span> 72 <div class="show"> 73 <img class="show_img" src="sjxq01_boom.jpg"> 74 </div> 75 </div> 76 </li> 77 <li > 78 <div class="div" style="display: none"> 79 <img src="sjxq3_boom.jpg"> 80 <span class="span"></span> 81 <div class="show"> 82 <img class="show_img" src="sjxq3_boom.jpg"> 83 </div> 84 </div> 85 86 </li> 87 </ul> 88 89 <script type="text/javascript" src="jquery.min.js"></script><script src="demo.js"></script> 90 </body> </html>
js代码：
1 $(document).ready(function () { 2 (function () { 3 var mouseX, //鼠标光标X坐标 4 mouseY, 5 divX, //最外层DIV X坐标 6 divY, 7 spanX, //放大镜 X坐标 8 spanY, 9 divW, // 最外层 DIV 宽度 10 divH, 11 scrY, //滚动条卷去的高度 12 div = $(".div"); 13 div.on("mousemove", function (e) { 14 $(this).find(".span").show(); 15 $(this).find(".show").show(); 16 scrY=document.body.scrollTop||document.documentElement.scrollTop; 17 divW = div.width(); 18 divH = div.height(); 19 mouseX = e.originalEvent.x || e.originalEvent.layerX || 0; 20 mouseY = e.originalEvent.y || e.originalEvent.layerY || 0; 21 divY = $(this).offset().top; 22 divX = $(this).offset().left; 23 spanX = mouseX - divX - 50; 24 spanY = mouseY - divY - 50+scrY; 25 if ((spanX + 100) > divW) { 26 spanX = 400; 27 } 28 if ((spanY + 100) > divW) { 29 spanY = 400; 30 } 31 if (spanX < 0) { 32 spanX = 0; 33 } 34 if (spanY < 0) { 35 spanY = 0; 36 }
if(mouseX > (divW+divX)){
$(this).find(".span").hide();
$(this).find(".show").hide();
}
37 $(this).find(".span").css('left', spanX).css('top', spanY); 38 $(this).find(".show_img").css("left", -3 * spanX).css('top', -3 * spanY); 39 }); 40 div.on("mouseout", function () { 41 $(this).find(".span").hide(); 42 $(this).find(".show").hide(); 43 }); 44 div.on("mouseover", function () { 45 }); 46 47 })(); 48 49 });