jQuery实现仿京东商城图片放大镜

效果图：

 

不废话直接上代码：

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

 

posted @ 2017-03-23 15:28  objectBao  阅读(642)  评论(0)  编辑  收藏  举报