javascript 淡入淡出效果

浏览数：14 / 时间：2015年06月08日

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<style>
			#dd{
				width:200px;
				height:200px;
				background:red;
				opacity: 0.3;
			}	
		</style>
		<script>
			window.onload=function(){
				var oDiv=document.getElementById('dd');
				var oBtn=document.getElementById('btn');
				var timer=null;
				var old=0.3;
				var speed;
				var speedValue=0.2;
				function startMove(){
					
					old+=speed;
					if(old<=1&&old>=0.3)
					{
						oDiv.style.opacity=old;
					}
					else
					{
						if(old>1)
						{
							old=1;
							oDiv.style.opacity=1;
						}
						else
						{
							old=0.3;
							oDiv.style.opacity=0.3;
						}
						clearInterval(timer);
					}
				}
				oDiv.onmouseover=function(){
					clearInterval(timer);
					speed=speedValue;
					timer=setInterval(startMove,100);
				};
				oDiv.onmouseout=function(){
					clearInterval(timer);
					speed=-speedValue;
					timer=setInterval(startMove,100);
				};
			};
		</script>
	</head>
	<body>
		<div id="dd"></div>
		
	</body>
</html>

注意事项：

opactiy是firfox浏览器中的透明度设置，IE中是 filter:alpha(opactiy=30);

运行结果图：