今天无意中看到一篇自己收藏的文章，是js图片鼠标放上后逐渐变大离开后逐渐缩小的效果，感觉不错，想放到自己的博客中。但在测试的时候发现没有效果。然后仔细看了一下代码，这时才发现，代码不全...

由于在前阵子出差的过程中，发现自己前端中js比较差，并且对js有种畏惧感，总是感觉js很难，不好做。趁着今天不是太忙，所以要把这个代码给写出来，挑战一下自己。

功夫不负有心人啊，捣腾了几个小时，算是把这个js给写出来了，不是太难，但对于自己内心算是一个小挑战吧，下面把代码粘贴出来。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title> 鼠标放到图片上慢慢变大，移开后图片又慢慢变小</title>
	</head>
<body>
	<img id="imgs" onmouseover="max()" onmouseout="min()" src="https://img.chingli.net/yehzz.jpg" style="width: 600px;"/>
<script>
	var i=0
	imgs=document.getElementById('imgs');

	//变大
	function max(){
		img_width=document.getElementById('imgs').style.width;
		img_width_int=parseInt(img_width);
		imgs.style.width=img_width_int+1;
		i++;
		if(i<30)setTimeout('max()',10);
	}

	//变小
	function min(){
		img_width=document.getElementById('imgs').style.width;
		img_width_int=parseInt(img_width);
		imgs.style.width=img_width_int-1;
		i--;
		if(i>0)setTimeout('min()',10);
	}
</script>
</body>
</html>

图片大小渐变