【图片缩放效果】

consoles · May 12, 2016 · 7dcf161 · 7dcf161
1 parent cff7d8c
commit 7dcf161
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 0 deletions.
diff --git a/ImageZoomEffect/css/demo.less b/ImageZoomEffect/css/demo.less
@@ -0,0 +1,14 @@
+.wrap {
+  margin: 20px auto;
+  width: 500px;
+  img {
+    display: block;
+    margin: 0 auto;
+    width: 300px;
+    height: auto;
+  }
+  .controls {
+    margin-top: 20px;
+    text-align: center;
+  }
+}
diff --git a/ImageZoomEffect/demo.html b/ImageZoomEffect/demo.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>图片缓慢缩放效果</title>
+    <link rel="stylesheet" href="css/demo.css"/>
+</head>
+<body>
+<div class="wrap">
+    <img src="images/mm.jpeg" alt=""/>
+
+    <div class="controls">
+        <button id="zoomOutBtn">放大</button>
+        <button id="zoomInBtn">缩小</button>
+    </div>
+</div>
+<script src="js/demo.js"></script>
+</body>
+</html>
diff --git a/ImageZoomEffect/images/mm.jpeg b/ImageZoomEffect/images/mm.jpeg
diff --git a/ImageZoomEffect/js/demo.js b/ImageZoomEffect/js/demo.js
@@ -0,0 +1,52 @@
+/**
+ * Created by gaopengfei on 2016/5/3.
+ */
+
+var img = document.querySelector('img');
+
+var timer;
+
+// getComputedStyle返回的CSS属性带单位的
+const REAL_IMAGE_WIDTH = img.offsetWidth;
+const MAX_WIDTH = REAL_IMAGE_WIDTH * 2,
+    MIN_WIDTH = REAL_IMAGE_WIDTH * .5;
+
+const INTERVAL = 20; // 控制缩放的速度
+
+var zoomIn = function () {
+    var endWidth = img.offsetWidth * .7;
+    if (img.offsetWidth < MIN_WIDTH) {
+        return alert('图片缩小到最小值');
+    }
+    clearInterval(timer);
+    timer = setInterval(function () {
+        if (img.width > endWidth) {
+            img.style.width = img.offsetWidth * .95 + 'px';
+        } else {
+            clearInterval(timer);
+        }
+    }, INTERVAL);
+};
+
+var zoomOut = function () {
+    var endWidth = img.offsetWidth * 1.3;
+    if (img.width > MAX_WIDTH) {
+        return alert('图片放大到最大值');
+    }
+    clearInterval(timer);
+    timer = setInterval(function () {
+
+        if (img.offsetWidth < endWidth) {
+            img.style.width = img.offsetWidth * 1.05 + 'px';
+        } else {
+            clearInterval(timer);
+        }
+    }, INTERVAL);
+};
+
+document.querySelector('#zoomInBtn').addEventListener('click', function () {
+    zoomIn();
+});
+document.querySelector('#zoomOutBtn').addEventListener('click', function () {
+    zoomOut();
+});