初级运动框架的搭建

最新推荐文章于 2024-09-22 21:57:00 发布

qx1995318

最新推荐文章于 2024-09-22 21:57:00 发布

阅读量227

点赞数

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

版权

</pre>今天学习了利用js搭建一个简单地运动框架，从最初的单一运动如图片的变宽，通过对函数参数的替换与增加，最终实现了多个属性的运动如透明度，如字体大小等都可以由同一个函数实现，希望以后能多学习这种函数通用的思想。代码如下<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>初级运动框架</title>
<style>
div {width:200px; height:200px; margin:20px; float:left; background:#f63208; border:10px solid black; filter:alpha(opacity:50); opacity:0.5;}
</style>
<script>
window.οnlοad=function ()
{
	var oDiv1=document.getElementById('div1');
	
	oDiv1.οnmοuseοver=function ()<span style="white-space:pre">							</span>//透明度变化
	{
		startMove(this, 'opacity', 100);
	};
	oDiv1.οnmοuseοut=function ()
	{
		startMove(this, 'opacity', 50);
	};

	var oDiv2=document.getElementById('div2');
	
	oDiv2.οnmοuseοver=function ()<span style="white-space:pre">							</span>//宽度变化
	{
		startMove(this, 'width', 100);
	};
	oDiv2.οnmοuseοut=function ()
	{
		startMove(this, 'width', 200);
	};

	var oDiv3=document.getElementById('div3');
	
	oDiv3.οnmοuseοver=function ()<span style="white-space:pre">							</span>//高度变化
	{
		startMove(this, 'height', 100);
	};
	oDiv3.οnmοuseοut=function ()
	{
		startMove(this, 'height', 200);
	};

	var oDiv4=document.getElementById('div4');
	
	oDiv4.οnmοuseοver=function ()<span style="white-space:pre">							</span>//字体大小变化
	{
		startMove(this, 'font-size', 50);
	};
	oDiv4.οnmοuseοut=function ()
	{
		startMove(this, 'font-size', 10);
	};
};

function getStyle(obj, name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];
	}
	else
	{
		return getComputedStyle(obj, false)[name];
	}
}

function startMove(obj, attr, iTarget)
{
	clearInterval(obj.timer);							 //每次开始清除当前对象的定时器
	obj.timer=setInterval(function (){
		var cur=0;
		
		if(attr=='opacity')							//为透明度变化设置单独的方式，因为透明度单位不是px，且为小数
		{
			cur=parseFloat(getStyle(obj, attr))*100;
		}
		else
		{
			cur=parseInt(getStyle(obj, attr));
		}
		
		var speed=(iTarget-cur)/6; 					 <span style="white-space:pre">	</span>//缓冲运动
		speed=speed>0?Math.ceil(speed):Math.floor(speed);<span style="white-space:pre">			</span>//速度值向上向下取整
		
		if(cur==iTarget)							//达到目标值关闭定时器
		{
			clearInterval(obj.timer);
		}
		else
		{
			if(attr=='opacity')
			{
				obj.style.filter='alpha(opcity:'+(cur+speed)+')';
				obj.style.opacity=(cur+speed)/100;
			}
			else
			{
				obj.style[attr]=cur+speed+'px';
			}
		}
	}, 30);
}
</script>
</head>

<body>
<div id="div1">透明度</div>
<div id="div2">宽度</div>
<div id="div3">高度</div>
<div id="div4">字体大小</div>
</body>
</html>