JavaScript动画效果 opacity 透明度变化

最新推荐文章于 2024-09-23 02:01:58 发布

YOUAFR

最新推荐文章于 2024-09-23 02:01:58 发布

阅读量3.5k

点赞数

本文链接：https://blog.csdn.net/YOUAFR/article/details/78280036

版权

<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>