码迷,mamicode.com
首页 > Web开发 > 详细

JS 之完美运动框架

时间:2016-06-20 22:19:18      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:

 完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了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);
        
    }

 

JS 之完美运动框架

标签:

原文地址:http://www.cnblogs.com/RitaLee/p/5601928.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!