js运动框架

来源：互联网发布：wap网站源码编辑：程序博客网时间：2024/05/22 15:06

原生js实现动画运动，对象单个运动（移动，改变width，改变height–) 多对象运动，链式运动（先变width再变height）；同时运动（width和height同时变化）有什么错误欢迎指出来

使用方法：

var div=document.getElementById("div");div.onmouseover=function(){    startMove(div,{width:300},function(){//将宽度变为300px        alert("完成");    }}

运动框架源码：

//element是对象,json是js对象，你要操作的属性和数值,fn是回调函数function startMove(element,json,fn){    var flag=null;//是否执行完操作的标志    clearInterval(element.timer);//每次开始清除定时器    element.timer=setInterval(function(){        flag=true;        for(var attr in json){//将js对象遍历--attr为属性，json[attr]为值；            //取当前值            var curent=0;            if(attr=='opacity'){//透明度动画                curent=Math.round(parseFloat(getStyle(element,attr))*100);            }else{//其他运动                        curent=parseInt(getStyle(element,attr));            }            //计算速度            var speed=(json[attr]-curent)/40;            //ceil是向下取整，floor是向上取整 既Math.ceil(0.4)==1;Math.floor(0.4)==0;            speed=speed>0?Math.ceil(speed):Math.floor(speed);            console.log("speed"+speed);            //检测停止            if(curent!=json[attr]){                flag=false;//如果没有所有运动都完成，就不会停止；                if (attr=='opacity') {                                      element.style.filter='alpha(opacity:'+(curent+speed)+')';//兼容ie                    element.style.opacity=(curent+speed)/100;                }else{                    element.style[attr]=curent+speed+'px';                }            }           }            if (flag){//全部运动完成 停止计时器并执行回掉函数                    clearInterval(element.timer);                    if (fn){                        fn();                    }            }    })}function getStyle(element,attr){//获取样式    if(element.currentStyle){        return element.currentStyle[attr];//ie    }else{        return getComputedStyle(element,false)[attr];//火狐    }}

0 0