diff --git a/ImageZoomEffect/css/demo.less b/ImageZoomEffect/css/demo.less new file mode 100644 index 0000000..9e25a86 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/ImageZoomEffect/demo.html b/ImageZoomEffect/demo.html new file mode 100644 index 0000000..6c58d3d --- /dev/null +++ b/ImageZoomEffect/demo.html @@ -0,0 +1,19 @@ + + + + + 图片缓慢缩放效果 + + + +
+ + +
+ + +
+
+ + + \ No newline at end of file diff --git a/ImageZoomEffect/images/mm.jpeg b/ImageZoomEffect/images/mm.jpeg new file mode 100644 index 0000000..98b3d0e Binary files /dev/null and b/ImageZoomEffect/images/mm.jpeg differ diff --git a/ImageZoomEffect/js/demo.js b/ImageZoomEffect/js/demo.js new file mode 100644 index 0000000..51844a7 --- /dev/null +++ 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(); +}); \ No newline at end of file