这篇文章主要为大家详细介绍了 js 实现图片缓慢放大缩小效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 图片的缓慢缩放
- </title>
- </head>
- <script>
- window.onload = function() {
- var btn_big = document.getElementById("big");
- var btn_small = document.getElementById("small");
- var pic = document.getElementById("pic");
- //缓慢放大
- btn_big.onclick = function() {
- var width = parseInt(pic.style.width);
- var i = width;
- var count = 0;
- console.log(width);
- var timer = setInterval(function() {
- count++;
- i++;
- pic.style.width = i + "%";
- if (count == 10) {
- clearInterval(timer);
- } else if (i > 50) {
- btn_big.onclick = function(e) {
- btn_big.onclick = null;
- };
- }
- },
- 13);
- };
- //缓慢缩小
- btn_small.onclick = function() {
- var width = parseInt(pic.style.width);
- var count = 0;
- if (width == 10) {
- alert("图片已最小!!");
- return false;
- }
- console.log(width);
- var timer2 = setInterval(function() {
- count++;
- width--;
- pic.style.width = width + "%";
- if (count == 10) {
- clearInterval(timer2);
- } else if (width < 10) {
- btn_small.onclick = null;
- }
- },
- 13);
- }
- }
- </script>
- <style>
- #pic{ width: 20%; }
- </style>
- <body>
- <div id="pic" style="width: 20%">
- <img src="3.pic.jpg" style="width:100%;">
- </div>
- <div class="scale">
- <button id="big">
- 放大
- </button>
- <button id="small">
- 缩小
- </button>
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0307/263880.html