JS的完美运动框架

页面导航:首页 > 网络编程 > JavaScript > JS的完美运动框架

JS的完美运动框架

来源: 作者: 时间:2016-02-02 09:59 【

function getStyle(obj, name){if(obj currentStyle){return obj currentStyle[name];} else{return getComputedStyle(obj, false)[name];}} 注意:在多物体运动框架中,所有东西都不能

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






//注意:在多物体运动框架中,所有东西都不能公用 !否则出问题,BUG;将必要的变量加到物体的属性中就行。即:属性与运动对象绑定:速度、其他属性值(如透明度等等)
function startMove(obj, json, fnEnd)//完美运动框架//换为json,如:startMove(oDiv, {width: 400, height: 400})
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){

var bStop=true;   //关键 //假设:所有的值都已经到了


for(var attr in json) //用一个循环,把原来的那套东西包在里面,每次定时器执行的时候,都会循环,循环的次数取决于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); 
}



说明 :

obj ---------------> 进行运动的节点

json ------------> 要进行哪些运动 如:{width:300,height:200} 300 、200为目标点

fu ---------------> 运动结束后进行的 操作 如 :运动结束后出现一个弹窗什么的



这个JS完美运动框架是2 的 ~

在CSS3里还有一套超越完美运动框架的框架~那套框架在CSS3和CSS2里面通吃~

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<