本文实例为大家分享了图片缓慢放大缩小js实现代码,供大家参考,具体内容如下
<!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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。