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

时间：2021-05-25

知识要点

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

每隔1秒执行一次函数

clearInterval(fn)

清除计时器

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

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///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>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章