html如何让图片慢慢放大,js实现图片缓慢放大缩小效果

图片的缓慢缩放

window.onload = function(){

var btn_big = document.getElementById("big");

var btn_small = document.getElementById("small");

var pic = document.getElementById("pic");

//缓慢放大

btn_big.onclick = function(){

var width = parseInt(pic.style.width);

var i = width;

var count = 0;

console.log(width);

var timer = setInterval(function(){

count++;

i++;

pic.style.width = i + "%";

if(count == 10 ){

clearInterval(timer);

}else if( i > 50){

btn_big.onclick = function(e){

btn_big.onclick = null;

};

}

},13);

};

//缓慢缩小

btn_small.onclick = function(){

var width = parseInt(pic.style.width);

var count = 0;

if(width == 10){

alert("图片已最小!!");

return false;

}

console.log(width);

var timer2 = setInterval(function(){

count++;

width--;

pic.style.width = width +"%";

if(count == 10){

clearInterval(timer2);

}else if( width < 10){

btn_small.onclick = null;

}

},13);

}

}

#pic{

width: 20%;

}

放大 缩小