JS动画完美框架

 

html部分

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="../css/default.css" rel="stylesheet">
            <script src="../js/main.js">
            </script>
            <meta charset="utf-8">
                <title>
                    Document
                </title>
                <script type="text/javascript">
                    window.onload=function(){
                        var div=document.getElementsByTagName('div');
                        for(var i=0;i<div.length;i++){
                            div[i].timer=null;
                            
                              div[i].onmouseover = function() {
            // var _this = this;
            // var _this2 = _this;
            startMove(this, {width:400,height:400,opacity:100});
            //     startMove(_this, 400, 'height', function() {
            //         startMove(_this2, 100, 'opacity');
            //     });
            // }); //用this可以调取当前的节点对象
        };
        div[i].onmouseout = function() {
            // var _this = this;
            // var _this2 = _this;
            startMove(this,{width:200,height:200,opacity:30});
            //     startMove(_this, 200, 'height', function() {
            //         startMove(_this2, 200, 'width');
            //     });
            // }); //用this可以调取当前的节点对象
        };

                        }

};
                </script>
            </meta>
        </link>
    </head>
    <body>
        <div id="div1">
        </div>
        <div id="div2">
        </div>
    </body>
</html>

 

js部分

function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];//针对IE获取样式
    } else {
        return getComputedStyle(obj, false)[attr];//针对非IE获取样式。
    }
} //获取样式的好处，是防止出现obj.offsetWidth与boder这样的Bug。
function startMove(obj, json, fn) { //iTarget是具体的数字，attr是宽或高或透明度之类的。json[attr]，包括2者
    clearInterval(obj.timer); //清除计时器
    obj.timer = setInterval(function() {
          var flag=true;//假设所有都到达了目标
        for (var attr in json) { //用json，这样的话，可以2个函数同时运行。
            var icur = 0;
            var speed = 0;
            if (attr == 'opacity') {
                icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //这里获取到的是透明度
            } else {
                icur = parseInt(getStyle(obj, attr)); //因为获取到的宽或者高是小数，所以需要强制转换下,这里获取到的是宽高之类的
            } /*上面部分是获取具体的值，及是否是透明度*/
            speed = (json[attr] - icur) / 8; //因为这里的attr不能直接代表obj.offsetLeft,要用样式去获取.
            //json[attr]代替iTarget《==》speed=(iTarget-obj.offsetLeft)/8
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(json[attr] != icur) {
               flag=false;
            }
             if(attr == 'opacity') {
                    obj.style[attr] = (icur + speed) / 100; //icur+speed是当前的透明度加上变化的速度
                    obj.style.filter = 'alpha(opacity' + (icur + speed) + ')';
                } else {
                    obj.style[attr] = icur + speed + 'px';
                }
              if(flag) {
                clearInterval(obj.timer);
                if (fn) {
                    fn(); //如果有回调函数就执行回调函数。
                }
            }
        }
    }, 30);
}

css部分

* {
    margin: 0;
    padding: 0
}

div {
    width: 200px;
    height: 200px;
    filter: alpha(opacity:30);//针对IE的透明度
    opacity: 0.3;//非IE的透明度
    background: blue;
    margin-bottom: 20px;
}

 

 

js  分4部分  

1.判断类型，是透明度还是宽或者高

2.算运动速度

3.检测停止

4.清除计时器

posted @ 2017-02-07 20:04  一米阳光!  阅读(1008)  评论(0)  编辑  收藏  举报