JavaScript动画效果 opacity 透明度变化

<style type="text/css">
			#box {
				width: 200px;
				height: 200px;
				background: red;
				opacity:0.2;
				
				/*这是解决透明度在IE上的兼容问题*/
				filter:alpha(opacity=20);
			}
		</style>
	</head>

	<body>
		<div id="box"></div>
	</body>
		<script type="text/javascript">
			window.onload = function() {
				var oBox = document.getElementById('box');
				var timer = null;
				//声明透明度的变化区间值
				var speed = 1;
				//声明透明度的初始值这个变量
				var chuzhi = 20;
				//目标函数target 即是移入 的时候让他到达的值(透明度)
				function change(target) {
					clearInterval(timer);
					timer = setInterval(function() {
						//如果目标的透明度的值大于初始值 就是让他递增 加上去 正数
						//反之递减 负数
						if(target > chuzhi) {    
							speed = 1;   
						}else{    
							speed = -1;   
						}
						//当他是等于初始值的时候 就清楚定时器
						if(chuzhi == target) {    
							clearInterval(timer);   
						}   
						else {    
							chuzhi = chuzhi + speed;  
							oBox.style.opacity = chuzhi / 100;   
							
							//js处 解决IE浏览器的兼容问题 
							oBox.style.filter = 'alpha(opacity=' + chuzhi + ')';    
						}
					}, 30);
				}
				//调用函数
				//鼠标移入时候 是让透明度变到1 
				oBox.onmouseover = function() {
					change(100);
				}
				//鼠标移入时候 是让透明度变到0.2 初始值
				oBox.onmouseout = function() {
					change(20);
				}

			}
		</script>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值