JS運動框架

獲取操作對象非行間樣式:

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

運動主體方法:

function startMove(obj,json,fnEnd)
{
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		
		var bStop = true;
		
		for(var attr in json)
		{
			var cur = 0;
			
			if(attr=='opacity')
			{
				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;
			
			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(fnEnd)fnEnd();
		}
		
	},30);
}

運動主體是一個定時器, 通過傳入一個json字符串,可以同時操作對象的多個樣式值的修改,如{height:iHeight,width:400},

fnEnd是可選回調函數。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章