JS-运动框架

用JS来控制HTML元素样式变化

move.js:

//获取样式值
function getStyle(obj, attr)
{
	if( obj.currentStyle) //IE
	{
		return obj.currentStyle[attr];
	} else //Chrome、 FF
	{
		return getComputedStyle(obj, false)[attr];
	}
}


//传入参数:运动目标,运动参数键值对(json),连接函数
function start_move(obj,json, fn_end )
{
	//清除计时器
	clearInterval(obj.timer);
	obj.timer = setInterval(
		function()
		{
			var bStop = true;//判断是否该停止运动
			//依次从json中取出各个属性
			for( var attr in json)
			{
				var cur = 0; //记录属性的当前
				//获取属性的当前值
				if( attr == "opacity" )
				{
					//保证cur是个整数
					cur = Math.round(parseFloat(getStyle(obj, attr)*100));
				} 
				else 
				{
					cur = parseInt(getStyle(obj, attr));
				}
				//计算速度
				var speed = ( json[attr] - cur) / 6;
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
				//判断是否停止运动
				if( cur != json[attr] )//如果当前值不等于目标值
				{
					bStop = false;	
					//更改obj属性
					if( attr == "opacity" ){
						obj.style.filter = "alpha(opacity:" + cur + speed + ")";
						obj.style.opacity = (cur + speed) / 100;
					}
					else 
					{
						obj.style[attr] = cur + speed + "px";
					}
				}
			}
			if( bStop)
			{
					clearInterval(obj.timer);//清除计时器
					if( fn_end )
					{//调用连接函数
						fn_end();
					}
			}
		}
	);
}

CurrentStyle 对象(IE兼容):代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。

getComputedStyle 函数:Chrome和FF兼容,获取元素样式。


关于样式表

样式表有三种:

      内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。

      内部样式(internal Style Sheet):是写在HTML的<head></head>里面的,内部样式只对所在的网页有效。

      外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。


      对于最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。在这种情况下可以通过CurrentStyle ,ComputedStyle和RuntimeStyle来解决。


CurrentStyle:代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。

RuntimeStyle:代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。运行时的样式,如果与style的属性重叠,将覆盖style的属性。

currentStyle可以弥补style的不足,但是只适用于IE
getComputedStyle同currentStyle作用相同,但是适用于FF、opera、safari、chrome

测试例子:

<!DOCTYPE HTML>
<html>
	<head>
		<title>Test Move</title>
		<meta charset="utf-8"/>
		<script type="text/javascript" src="move.js"></script>
	</head>
	<style type="text/css">
		#div1 {
			left: 40px;
			top: 40px;
			width: 20px;
			height: 20px;
			position: absolute; 
			background: red;
		}
	</style>
	<body>
		<div id="div1"></div>
		<input type="button" id="button" value="Move"></button>
	</body>
</html>
<script type="text/javascript">
	window.onload = function(){
		var oButton = document.getElementById("button");
		var oDiv = document.getElementById("div1");
		
		function move_button_back(){
			start_move( oButton, {height: 20, width: 40});
		}
	
		function move_div_back(){
			start_move( oDiv, {left: 40, height: 20, width: 20});
		}
		
		oButton.onclick = function() {
			start_move(oButton, {width: 300, height: 300}, move_button_back);
			start_move(oDiv, {left: 300, width: 200, height: 80}, move_div_back);
		}
	}
</script>

运行效果:


JS-运动框架_第1张图片


参考:http://hi.baidu.com/lepharye/item/c36d3ba9ab3a919c14107344

你可能感兴趣的:(JavaScript,style,currentStyle,runtimeStyle,ComputedStyle)