码迷,mamicode.com
首页 > 编程语言 > 详细

javascript 淡入淡出效果

时间:2014-11-21 14:25:46      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:web前端   javascript   

<!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);

运行结果图:

bubuko.com,布布扣

javascript 淡入淡出效果

标签:web前端   javascript   

原文地址:http://blog.csdn.net/u012193330/article/details/41348019

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!