admin

4-BOM&DOM/练习9_DOM放大镜.html

@@ -33,10 +33,12 @@
             float: left;
             overflow: hidden;
             margin-left: 20px;
+            position: relative;
         }
         .big-img img{
             width: 800px;
             height: 800px;
+            position: absolute;
         }
     </style>
 </head>
@@ -47,8 +49,53 @@
             <div class="mask"></div>
         </div>
         <div class="big-img">
-            <img src="./image/niu.png" alt="img">
+            <img id="big-bg" src="./image/niu.png" alt="img">
         </div>
     </div>
+    <script>
+        // 第一步获取元素
+        // 获取小图内的透明蒙版
+        var oMask = document.getElementsByClassName("mask");
+        oMask = oMask[0];
+        // 获取小图区域
+        var oSmallImg = document.getElementsByClassName("small-img");
+        oSmallImg = oSmallImg[0];
+        // 获取大图片
+        // var oBigImg = document.getElementsByClassName("big-img");
+        // oBigImg = oBigImg[0];
+        var oBigImg = document.getElementById("big-bg");
+
+
+
+        // 第二步给小图区域绑定鼠标移动事件
+        oSmallImg.onmousemove = function(e){
+            var x = e.clientX-100;
+            var y = e.clientY-100;
+
+            // 判断蒙版是否越界
+            if(x>200){
+                x = 200
+            }
+            if(y>200){
+                y = 200
+            }
+            if(x<0){
+                x=0
+            }
+            if(y<0){
+                y=0
+            }
+
+
+            // 设置半透明蒙版的位置
+            oMask.style.left = x + "px";
+            oMask.style.top = y + "px";
+
+            // 控制大图的移动
+            oBigImg.style.left = (-2*x) + "px";
+            oBigImg.style.top = (-2*y) + "px";
+        }
+
+    </script>
 </body>
 </html>