仅通过js实现颜色渐变

最新推荐文章于 2024-05-07 21:04:09 发布

不科学的年轻人

最新推荐文章于 2024-05-07 21:04:09 发布

阅读量2.7k

点赞数

分类专栏： js 渐变 javascript 文章标签： js 特效

本文链接：https://blog.csdn.net/qq_27329021/article/details/78265234

版权

js 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

渐变

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background-color: red;
			opacity: 0.2; /* target  0.1 */
			filter: alpha(opacity: 20); /* 兼容IE的写法 */
		}
	</style>
	<script type="text/javascript">
		window.οnlοad=function(){
			var oBox = document.getElementById('box');
			var oAlpha = 20;
			var timer = null; //装有定时器的函数不可以放timer

			function move(target){
				var speed = 10;
				clearInterval(timer);
				timer = setInterval(function(){
					if(target>oAlpha){  //判断运动系数的加减
						speed = 10;
					}else{
						speed = -10;
					}

					if(target == oAlpha){
						clearInterval(timer);
					}else{
						oAlpha = oAlpha+speed;
						oBox.style.opacity = oAlpha/100;
						//非IE写法
						oBox.style.filter = 'alpha(opacity:'+oAlpha+')';//IE写法
					}
				},30);
			}

			oBox.onmouseover = function() {
				move(100);
			}
			oBox.onmouseout = function(){
				move(20);
			}
			
		}
		
	</script>
</head>
<body>
	<div id="box"></div>
</body>
</html>