学习JS运动透明度变化笔记

最新推荐文章于 2024-09-18 17:01:09 发布

qx1995318

最新推荐文章于 2024-09-18 17:01:09 发布

阅读量277

点赞数

本文链接：https://blog.csdn.net/qx1995318/article/details/51713558

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>透明度的变化</title>
<style>
div {width:200px; height:200px; margin:20px; float:left; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>
<script>
window.οnlοad=function ()
{
	var aDiv=document.getElementsByTagName('div');
	
	for(var i=0;i<aDiv.length;i++)
	{
		aDiv[i].alpha=30;								//为每个物体设置透明度					
		
		aDiv[i].οnmοuseοver=function ()
		{
			startMove(this, 100);
		};
		aDiv[i].οnmοuseοut=function ()
		{
			startMove(this, 30);
		};
	}
};

//var alpha=30;											//属性不能共用需改为aDiv[i].alpha=30;

function startMove(obj, iTarget)
{
	clearInterval(obj.timer);				           		        //关闭物体定时器
	obj.timer=setInterval(function (){							//开始定时器
		var speed=(iTarget-obj.alpha)/6;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		
		if(obj.alpha==iTarget)								//判断与目标透明度的关系
		{
			clearInterval(obj.timer);
		}
		else
		{
			obj.alpha+=speed;
			
			obj.style.filter='alpha(opacity:'+obj.alpha+')';  	<span style="white-space:pre">		</span>//IE方式的透明度
			obj.style.opacity=obj.alpha/100; 					//谷歌FF的透明度
		}
	}, 30);
}
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>