基础 - 动画函数的初步封装

小数的取整

　　WHY?　　JS不能精准的表示小数

　　Math.round() 　　 四舍五入取整
　　Math.ceil() 　　 向上取整
　　Math.floor() 　　向下取整

属性的访问

　　点语法

　　[""]法

得到内嵌和外链的CSS

　　IE Opera　　currentStyle

　　其他　　　　 getComputedStyle第二个参数为伪类

　　兼容写法

　　function funGetStyle(obj,attr)
　　{
    　　return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];
　　}

JSON的遍历

var JSON = {"name":"WeWeZhang","hobby":"money"};
for (var key in JSON) {
    console.log("键"+key+"值"+JSON[key])
}

in运算符
var bIsContain = string in array;

初步封装动画函数

    <!-- JavaScript -->
    <script type="text/javascript" src="JavaScript/weAnimate.js"></script>

 

weAnimate(box,{width: 200, top: 100,left: 200,opacity:40,zIndex:3},function(){alert("我来了")});

 

function weGetStyle(obj,attr) {
    return obj.currentStyle?obj.currentStyle[attr]:window.getComputedStyle(obj,null)[attr];
}
function weAnimate(obj,json,fn) {
    clearInterval(obj.timer);
    weAnimateDetial();
    obj.timer = setInterval(function() {
        weAnimateDetial();
    },30)
    function  weAnimateDetial() {
        var flag = true;
        for(var attr in json){
            var current = 0;
            if(attr == "opacity"){
                current = Math.round(parseInt(weGetStyle(obj,attr)*100)) || 0;
            }else {
                current = parseInt(weGetStyle(obj,attr));
            }
            var step = ( json[attr] - current) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if(attr == "opacity"){
                if("opacity" in obj.style){
                    obj.style.opacity = (current + step) /100;
                }else{
                    obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";
                }
            }else if(attr == "zIndex") {
                obj.style.zIndex = json[attr];
            }else{
                obj.style[attr] = current  + step + "px" ;
            }
            if(current != json[attr]) {
                flag =  false;
            }
        }
        if(flag){
            clearInterval(obj.timer);
            if(fn){
        　　　　 fn();
            }
        }
    }
}