JS 之完美运动框架

Posted 2020-07-27 RitaLee

 完美运动框架是对原来的任意值运动框架的改善和效率的提升，即利用了json对属性进行封装，从而提高效率：

window.onload=function(){
        var oDiv=document.getElementsByTagName(‘div‘)[0];
        oDiv.onmouseover=function(){
            move(this,{width:200,height:200});
        }
    }
    function getStyle(obj,attr){
        if (obj.currentStyle) {
            return currentStyle(obj)[attr];
        }else{
            return getComputedStyle(obj,false)[attr];
        }
    }
    function move(obj,json,fn){
            obj.timer=setInterval(function(){
                for (var attr in json){
                    var iCur=0;
                    if (attr == ‘opacity‘) {
                        iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
                    }else{
                        iCur=parseInt(getStyle(obj,attr));
                    }
                    var speed=(json[attr]-iCur)/8;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    if (iCur == json[attr]) {
                        clearInterval(obj.timer);
                        fn&&fn();
                    }else{
                        obj.style[attr]=iCur+speed+‘px‘;
                    }

                }
        },30);
        
    }