颜色淡入淡出（变量存透明度）

最新推荐文章于 2024-04-02 12:15:00 发布

koukou0419

最新推荐文章于 2024-04-02 12:15:00 发布

阅读量277

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/koukou0419/article/details/80701924

版权

前端专栏收录该内容

72 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{
	    	margin:0px;
	    	padding:0;
	    }
		.active{
			border:1px solid red;
			width:100px;
			height:50px;		
		}
		
		.div1{
			width:600px;
			height:400px;
			margin-top: 100px;
			background-color: green;
			opacity: 0.3;
			
		}

		/*.div2{
			width:25px;
			height:60px;
			background-color: red;
			position:absolute;
			right:-25px;

		}
		*/
	</style>
		
</head>
<body>
	
	<div class="div1"  >
		<div class="div2"></div>
	</div>
	
	<script>
		var timer;
		var alpha=30;
		function startMove(target){

			var div1=document.getElementsByTagName('div')[0];
				var speed=0;
				clearInterval(timer);
				timer=setInterval(function(){
					if(target>alpha){
						speed=2;
					}else{
						speed=-2;
					}if(target==alpha){
						clearInterval(timer);
					}else{
						alpha=alpha+speed;
						div1.style.filter="alpha(opcity:'+alpha+')";
						div1.style.opacity=alpha/100;

					}
				},100);
			
		}

     window.onload=function(){
     	    var div1=document.getElementsByTagName('div')[0];
            div1.onmouseover=function(){
           	startMove(100);
           	div1.onmouseout=function(){
           		startMove(0);
           	}
           }

     }

	</script>
		
		
</body>
</html>