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

知识要点

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>

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

# js图片放大缩小 # js实现图片放大缩小 # js计时器 # JS简单的图片放大缩小的两种方法 # JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动 # javascript 图片放大缩小功能实现代码 # JS实现图片放大缩小的方法 # js实现用滚动条来放大缩小图片的代码 # js实现图片旋转 js滚动鼠标中间对图片放大缩小 # js实现图片缓慢放大缩小效果 # js实现图片放大缩小功能后进行复杂排序的方法 # js实现使用鼠标拖拽切换图片的方法 # 原生JS实现拖拽图片效果 # JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】 # JavaScript实现图片的放大缩小及拖拽功能示例 # 计时器 # 每隔 # 最小值 # dt # dd # dl # hr # blockquote # charset # utf # content # text # title # body # demo # style # select # font # margin # padding

返回目录在线咨询

上一篇：VPS建站安全性高吗？如何保障数据安全？
下一篇：格式良好的(Well-Formed)XML是什么，它和有效的(Valid)XML有何区别？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求