鼠标放大镜案例代码 

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         * {margin: 0;padding: 0;}
  8         img {
  9             vertical-align: top;
 10         }
 11         .box {
 12             width: 350px;
 13             height: 350px;
 14             margin:100px;
 15             border: 1px solid #ccc;
 16             position: relative;
 17         }
 18         .big {
 19             width: 450px;
 20             height: 450px;
 21             position: absolute;
 22             top: 0;
 23             left: 360px;
 24             border: 1px solid #ccc;
 25             overflow: hidden;
 26             display: none;
 27         }
 28         .mask {
 29             width: 100px;
 30             height: 100px;
 31             background: rgba(255, 255, 0, 0.4);
 32             position: absolute;
 33             top: 0;
 34             left: 0;
 35             cursor: move;
 36             display: none;
 37         }
 38         .small {
 39             position: relative;
 40         }
　　　　　　　//因为图片要进行移动，所以必须对其进行定位

 41         .big img {
 42             position: absolute;
 43             top: 0;
 44             left: 0;
 45         }
 46     </style>
 47 </head>
 48 <body>
 49 <div class="box" id="fdj">
 50     <!--小盒子-->
 51     <div class="small">
 52         <img src="images/001.jpg" alt=""/>
 53         <div class="mask"></div>
 54     </div>
 55     <div class="big">
 56         <img src="images/0001.jpg" alt=""/>
 57     </div>
 58 </div>
 59 </body>
 60 </html>
 61 <script>
 62    var fdj = document.getElementById("fdj");  // 获得最大的盒子
 63     var small = fdj.children[0];  // 获得small 小图片 350盒子
 64     var big = fdj.children[1];  // 获得 大图片 800 盒子
 65     var mask = small.children[1];  // 小的黄色盒子
 66    var bigImage = big.children[0]; // 大盒子里面的图片
 67     small.onmouseover = function() {   // 鼠标经过显示出他们
 68         mask.style.display = "block";
 69         big.style.display = "block";
 70     }
 71     small.onmouseout = function() {
 72         mask.style.display = "none";
 73         big.style.display = "none";
 74     }
 75     //  鼠标在small 内移动
 76    var x = 0;
 77    var y = 0;
 78     small.onmousemove = function(event) {
 79         var event = event || window.event;
 80          x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2;  // 再某个盒子内的坐标
 81          //alert(this.offsetLeft);
 82          y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2;
 83          if(x < 0)
 84          {
 85              x = 0;
 86          }
 87          else if(x > small.offsetWidth - mask.offsetWidth)
 88          {
 89              x = small.offsetWidth - mask.offsetWidth;
 90          }
 91          if(y<0)
 92          {
 93             y = 0;
 94          }
 95          else if(y > small.offsetHeight - mask.offsetHeight)
 96          {
 97              y = small.offsetHeight - mask.offsetHeight;
 98          }
 99          mask.style.left = x + "px";
100          mask.style.top = y + "px";
101          /*计算  ：  夫子 一顿吃 2个馒头    娇子  一顿 4个馒头
102          问  夫子今天吃了 3个馒头  娇子应该吃几个？  */
103          /*计算出他们的倍数   4 / 2    2倍
104           3 * 2  == 6个  */
105          /* 大图盒子 /  小图盒子  倍数
106           我们 再小图移动的距离 *  倍数  ==  大图的位置；big.offsetWidth的大小不是绝对的，只要按照你想让其按照显示的比例就可以*/
107          bigImage.style.left =  -x *  big.offsetWidth /small.offsetWidth + "px";
108          bigImage.style.top =  -y *  big.offsetHeight /small.offsetHeight + "px";
109 
110     }
111 </script>

 

posted @ 2017-12-29 11:49  前端极客  阅读(587)  评论(0)  编辑  收藏  举报