原生js实现图片放大缩小计时器效果

2019-11-19 17:51:10

字体：大中小

来源：转载

供稿：网友

知识要点

var fn=setInterval(function(){},1000)

每隔1秒执行一次函数

clearInterval(fn)

清除计时器

判断当图片放大缩小到固定大小时，清除计时器

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>demo</title><style>body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,/5b8b/4f53;}h1,h2,h3,h4,h5,h6{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}small{font-size:12px;}ul,ol{list-style:none;}a{text-decoration:none;}a:hover{text-decoration:underline;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}legend{color:#000;}fieldset,img{border:0;}button,input,select,textarea{font-size:100%;}table{border-collapse:collapse;border-spacing:0;}.clear{clear: both;float: none;height: 0;overflow: hidden;}</style> </head> <body><div style="width:400px;margin:0 auto;"> <img src="http://img.mukewang.com/53577ee900016c2102080260.jpg" id="myImage" /><br> <input type="button" id="max" value="放大" /> <input type="button" id="min" value="缩小" /></div><script type="text/javascript">function pic_max(){ var maxBtn=document.getElementById("max"); var minBtn=document.getElementById("min");  maxBtn.onclick=function(){ max(); } var img=document.getElementById("myImage"); var maxHeight=img.height*2; var maxWidth=img.width*2; function max(){ var endHeight=img.height*1.3; var endWidth=img.width*1.3; var maxTime=setInterval(function(){ if(img.height<endHeight&&img.width<endWidth){  if(img.height<maxHeight&&img.width<maxWidth){  img.height=img.height*1.05;  img.width=img.width*1.05;  }else{  alert("图片已经是最大值了")  clearInterval(maxTime);  } }else{  clearInterval(maxTime); } },20); } minBtn.onclick=function(){ min(); } var img=document.getElementById("myImage"); var minHeight=img.height*0.5; var minWidth=img.width*0.5; function min(){ var overHeight=img.height*0.7; var overWidth=img.width*0.7; var minTime=setInterval(function(){ if(img.height>overHeight&&img.width>overWidth){  if(img.height>minHeight&&img.width>minWidth){  img.height=img.height*0.95;  img.width=img.width*0.95;  }else{  alert("图片已经是最小值了")  clearInterval(minTime);  } }else{  clearInterval(minTime); } },20); }}window.onload=function(){ pic_max();}</script> </body> </html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：jQuery中DOM节点删除之empty与remove

下一篇：详解基于angular路由的requireJs按需加载js