原生js

ledudu · Aug 19, 2017 · ecc2ced · ecc2ced
1 parent 2fe5f55
commit ecc2ced
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 0 deletions.
diff --git a/javascript实现放大镜效果/index.html b/javascript实现放大镜效果/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>放大镜</title>
+    <style>
+        *{
+            margin: 0px;
+            padding: 0px;
+        }
+        #demo {
+            display: block;
+            width: 400px;
+            height: 255px;
+            margin: 50px;
+            position: relative;
+            border: 1px solid #ccc;
+        }
+        #small-box {
+            position: relative;
+            z-index: 1;
+        }
+        #float-box {
+            display: none;
+            width: 160px;
+            height: 120px;
+            position: absolute;
+            background: #ffffcc;
+            border:1px solid #cccccc;
+            filter: alpha(opacity=50);
+            opacity: 0.5;
+            cursor: move;
+        }
+        #big-box {
+            display: none;
+            position: absolute;
+            top:0;
+            left:460px;
+            width: 400px;
+            height: 300px;
+            overflow: hidden;
+            border: 1px solid #cccccc;
+            z-index: 1;
+        }
+        #big-box img {
+            position: absolute;
+            z-index: 5;
+        }
+    </style>
+</head>
+<body>
+<div id="demo">
+    <div id="small-box">
+        <div id="float-box"></div>
+        <img src="macbook-small.jpg" alt="">
+    </div>
+    <div id="big-box">
+        <img src="macbook-big.jpg" alt="">
+    </div>
+</div>
+<script>
+    window.onload=function() {
+        var objDemo=document.getElementById("demo");
+        var objSmallBox=document.getElementById("small-box");
+        var objFloatBox=document.getElementById("float-box");
+        var objBigBox=document.getElementById("big-box");
+        var objBigBoxImage=objBigBox.getElementsByTagName("img")[0];
+        objSmallBox.onmouseover = function () {
+            objFloatBox.style.display = "block";
+            objBigBox.style.display = "block";
+        }
+
+        objSmallBox.onmouseout = function () {
+            objFloatBox.style.display = "none";
+            objBigBox.style.display = "none";
+        }
+
+        objSmallBox.onmousemove = function (ev) {
+
+            var _event = ev || window.event;  //兼容多个浏览器的event参数模式
+
+            var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
+            var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
+
+            if (left < 0) {
+                left = 0;
+            } else if (left > (objSmallBox.offsetWidth - objFloatBox.offsetWidth)) {
+                left = objSmallBox.offsetWidth - objFloatBox.offsetWidth;
+            }
+
+            if (top < 0) {
+                top = 0;
+            } else if (top > (objSmallBox.offsetHeight - objFloatBox.offsetHeight)) {
+                top = objSmallBox.offsetHeight - objFloatBox.offsetHeight;
+
+            }
+
+            objFloatBox.style.left = left + "px";
+            objFloatBox.style.top = top + "px";
+
+            var percentX = left / (objSmallBox.offsetWidth - objFloatBox.offsetWidth);
+            var percentY = top / (objSmallBox.offsetHeight - objFloatBox.offsetHeight);
+
+            objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
+            objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
+        }
+    }
+</script>
+</body>
+</html>
diff --git a/javascript实现放大镜效果/macbook-big.jpg b/javascript实现放大镜效果/macbook-big.jpg
diff --git a/javascript实现放大镜效果/macbook-small.jpg b/javascript实现放大镜效果/macbook-small.jpg