Fade in Fade out(淡入淡出).html

<!Doctype HTML >
<html>
	<head>
		<meta charset='utf-8'>
		<title></title>
		<style>
			#img1{
				filter:alpha(opacity:30);
				opacity: 0.3;
			}
		</style>
	</head>
	<body>
		<img id="img1" src="images/pic2.png" alt="">
	</body>
	<script>
		window.onload = function (){

			var oImg=document.getElementById('img1');
			oImg.onmouseover = function (){
				startMove(100);
			}
			oImg.onmouseout = function (){
				startMove(30);
			}
		}
		var timer = null;
		var alpha = 30;
		function startMove(iTarget){
			var oImg=document.getElementById('img1');
			clearInterval(timer);
			timer = setInterval(function (){
				var iSpeed = 0;
				if(alpha < iTarget){
					iSpeed = 3;
				}
				else{
					iSpeed = -3;
				}
				if(alpha == iTarget){
					clearInterval(timer);
				}
				else{
					alpha +=iSpeed;
					oImg.style.filter = 'alpha(opacity:'+alpha+')';
					oImg.style.opacity = alpha/100;
					document.title=alpha;
				}
			},30);
		}
	</script>
</html>