js运动中级

·  链式运动框架

//取非行间样式封装函数
function getStyle(obj,name)
{
	if(obj.currentStyle)
	{
		//只兼容IE
		return obj.currentStyle[name];
	}
	else
	{
		//不兼容IE，其他的可以
		return getComputedStyle(obj,false)[name];
	}
};


//传入三个参数，实现一个运动框架操作多个div不同的属性
//最后一个传入函数，实现链式运动框架
function startMove(obj,attr,iTarget,fnEnd)
{
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		
		//简化代码，用变量存储取到的非行间样式，并且把他变成整数
		var cur = 0;
		if(attr=='opacity')
		{
			//对取出的opacity转化成小数然后乘以100然后四舍五入
			cur = Math.round(parseFloat(getStyle(obj,attr))*100);
		}
		else
		{
			cur =parseInt(getStyle(obj,attr));
		}


		var speed = (iTarget-cur)/6;
		speed = speed>0?Math.ceil(speed):Math.floor(speed);


		if (cur==iTarget)
		{
			clearInterval(obj.timer);
			if(fnEnd)fnEnd();
		}
		else
		{
			if(attr=='opacity')
			{
				//做浏览器兼容
				obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
				obj.style.opacity = (cur+speed)/100;
			}
			else
			{
			obj.style[attr] = cur+speed+'px';
			}
		}
	},30);
};

· 完美运动框架

//取非行间样式封装函数
function getStyle(obj,name)
{
	if(obj.currentStyle)
	{
		//只兼容IE
		return obj.currentStyle[name];
	}
	else
	{
		//不兼容IE，其他的可以
		return getComputedStyle(obj,false)[name];
	}
};


//用json实现每一个属性都循环一遍
function startMove(obj,json,fnEnd)
{
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		
		var bStop=true; //假设所有的值已经到了
		
		//json 用for in 循环
		for(var attr in json)
		{
			//简化代码，用变量存储取到的非行间样式，并且把他变成整数
			var cur = 0;
			if(attr=='opacity')
			{
				//对取出的opacity转化成小数然后乘以100然后四舍五入
				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);

			//如果有一个值没有到，就把bStop设为假的，执行下面的运动
			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);
};

·微博发布效果 （创建元素、头部插入、运动框架应用显示）

	oBtn.οnclick=function ()
	{
		//创建一个li，把文本框里面的内容给li，然后清空文本框的内容
		var oLi = document.createElement('li');
		oLi.innerHTML = oTxt.value;
		oTxt.value='';
		
		//头部插入判断
		if(oUl.children.length>0)
		{
			oUl.insertBefore(oLi,oUl.children[0]);
		}
		else
		{
			oUl.appendChild(oLi);
		}

		//定义一个变量存放li的实际高度
		var iHeight=oLi.offsetHeight;
		//把li的高变成0
		oLi.style.height='0';
		//运动
		startMove(oLi,{height:iHeight},function(){
			startMove(oLi,{opacity:100});
		});
	};

笔记：

JS运动中级


·链式运动框架
1.回调函数
2.运动停止时，执行函数
3.运动停止时，开始下一次运动
例子：土豆网右下角菜单


·完美运动框架
1.多个值同时变化
2.setStyle同时设置多个属性
参数传递、Json的使用、for in遍历属性
3.运用到运动框架
例子：伸缩同时淡入淡出的菜单


·运动框架演变过程
startMove(iTarget) 运动框架
startMove(obj, iTarget) 多物体
startMove(obj, attr, iTarget) 任意值
startMove(obj, attr, iTarget, fn) 链式运动
startMove(obj, json) 多值运动
startMove(obj, json, fn) 完美运动框架


·运动框架应用
例子：
1.幻灯片
2.微博发布效果