js实现图片缓慢放大缩小效果
本文实例为大家分享了图片缓慢放大缩小js实现代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>图片的缓慢缩放</title>
</head>
<script>
window.onload=function(){
varbtn_big=document.getElementById("big");
varbtn_small=document.getElementById("small");
varpic=document.getElementById("pic");
//缓慢放大
btn_big.onclick=function(){
varwidth=parseInt(pic.style.width);
vari=width;
varcount=0;
console.log(width);
vartimer=setInterval(function(){
count++;
i++;
pic.style.width=i+"%";
if(count==10){
clearInterval(timer);
}elseif(i>50){
btn_big.onclick=function(e){
btn_big.onclick=null;
};
}
},13);
};
//缓慢缩小
btn_small.onclick=function(){
varwidth=parseInt(pic.style.width);
varcount=0;
if(width==10){
alert("图片已最小!!");
returnfalse;
}
console.log(width);
vartimer2=setInterval(function(){
count++;
width--;
pic.style.width=width+"%";
if(count==10){
clearInterval(timer2);
}elseif(width<10){
btn_small.onclick=null;
}
},13);
}
}
</script>
<style>
#pic{
width:20%;
}
</style>
<body>
<divid="pic"style="width:20%">
<imgsrc="3.pic.jpg"style="width:100%;">
</div>
<divclass="scale">
<buttonid="big">放大</button><buttonid="small">缩小</button>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。