鼠标放到图片上，图片缓慢变大，离开时，图片缓慢恢复

给大家介绍一个小的动态效果，当鼠标放到图片上时，图片会变大，鼠标离开时，图片恢复，如果想简单一点，直接给图片加一个hover就可以了，但是这样效果不是很美观，我想让它有一个过度的实现效果，移除的时候也有，那我们就需要用到js了：

先放入一张图片，或者任意一个块标签，设置宽高

<div class="harley">
	<img src="img/muotuo1.png" />
</div>

css样式

 .harley{           //设置容器的大小
	 width: 350px;
	 height: 300px;
	 overflow: hidden;    //这个一定要加，如果是多张图片，不加的话会导致效果不好看，溢出隐藏
  }
  .harley img{     //图片大小
		width: 300px;
		height: 175px;
  }
			  

js

<script>
		var Harley=document.getElementsByClassName("harley")[0];
		var Imgone=Harley.getElementsByTagName("img")[0];
		Imgone.onmouseover = function () {
			Imgone.style.width="330px";
			Imgone.style.height="185px";
			Imgone.style.transition="0.8s ease";
		}
		Imgone.onmouseout = function () {
			Imgone.style.width="";    //不需要设置大小，空的话会回到原来大小
			Imgone.style.height="";
			Imgone.style.transition="0.8s ease";
		}
	</script>