溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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,h2,h3,h4,h5,h6,h7,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;}
h2,h3,h4,h5,h6,h7{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 >
<img src="https://cache.yisu.com/upload/information/20200622/114/77716.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如何實現圖片放大縮小計時器效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
