运动框架 startMove函数

一、获取非行间样式

类似p.style.height只能获取行内样式

p.offsetHeight当前高度，包含内外边距及边框

获取非行间样式：

function getAttr(obj, attr) {
    var style;
    if(window.getComputedStyle) {
        style = getComputedStyle(obj, false)[attr]; //主流浏览器
    } else {
        style = obj.currentStyle[attr]; //兼容IE
    }
    return style;
}

1.window.getComputedStyle(obj,false)[‘attr’]

这是BOM（浏览器window对象）提供的方法 ，所以可以直接写成getComputedStyle(nodeObj,false)，省略前面的window对象,该方法有两个参数，第一个是要获取样式的节点对象；第二个可以写成任何的字符一般写成false或者null（兼容老版火狐），这里最好是用false因为用null IE9+会有问题；后面直接跟要获取的样式（写在方括号中）即可。这个方法的返回值为一个对象，为计算后的样式的属性值对的集合。比如要获取某个p宽度。那么可以直接写成 var style=getComputedStyle(p,false)[‘width’]; alert(style);

2.nodeObj.currentStyle[‘attr’];

node.currentStyle，该属性返回的也是是一个对象，也是计算后的样式的属性值对的集合。比如要获取某个p宽度。那么可以直接写成

var style=p.currentStyle['width']; 
alert(style);

二、运动框架 startMove函数

<script>
function startMove(obj,json,fn){
    clearInterval(obj.timer);
    var flag=true;
    obj.timer=setInterval(function(){
        for(var attr in json){
            var icur=0;
            if(attr=='opacity'){
                icur=Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
                icur=parseInt(getStyle(obj,attr));
            }
            /*匀速
            var speed=json[attr]>icur?10:-10;
            */
            //变速
            var speed=(json[attr]-icur)/5;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(icur!==json[attr]){
                flag=false;
            }else{
                flag=true;
            }
            if(attr=='opacity'){
                obj.style.filter='(opacity:'+(icur+speed)+')';
                obj.style.opacity=(icur+speed)/100;
            }else{
                obj.style[attr]=icur+speed+'px';
                console.log('1');
            }
        }
        if(flag){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },30);
}
function getStyle(obj,attr){
    var style;
    if(window.getComputedStyle){
        style=getComputedStyle(obj,false)[attr];
    }else{
        style=obj.currentStyle[attr];
    }
    return style;
}
</script>

<script>
function startMove(obj,json,fn){
    clearInterval(obj.timer);
    var flag=true;
    obj.timer=setInterval(function(){
        for(var attr in json){
            var icur=0;
            if(attr=='opacity'){
                icur=Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
                icur=parseInt(getStyle(obj,attr));
            }
            /*匀速
            var speed=json[attr]>icur?10:-10;
            */
            //变速
            var speed=(json[attr]-icur)/5;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(icur!==json[attr]){
                flag=false;
            }else{
                flag=true;
            }
            if(attr=='opacity'){
                obj.style.filter='(opacity:'+(icur+speed)+')';
                obj.style.opacity=(icur+speed)/100;
            }else{
                obj.style[attr]=icur+speed+'px';
                console.log('1');
            }
        }
        if(flag){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },30);
}
function getStyle(obj,attr){
    var style;
    if(window.getComputedStyle){
        style=getComputedStyle(obj,false)[attr];
    }else{
        style=obj.currentStyle[attr];
    }
    return style;
}
</script>

1.链式运动

<script>
window.onload=function(){
    var oDiv1=document.getElementById("p1");
    oDiv1.onmouseover=function(){
        startMove(oDiv1,{"width":100},function(){
            startMove(oDiv1,{"height":100},function(){
                startMove(oDiv1,{"opacity":100});
            });
        });
    };
}
</script>

<script>
window.onload=function(){
    var oDiv1=document.getElementById("p1");
    oDiv1.onmouseover=function(){
        startMove(oDiv1,{"width":100},function(){
            startMove(oDiv1,{"height":100},function(){
                startMove(oDiv1,{"opacity":100});
            });
        });
    };
}
</script>

2.同时运动

<script>
window.onload=function(){
    var oDiv1=document.getElementById("p1");
    oDiv1.onmouseover=function(){
        startMove(oDiv1,{"width":100,"height":100,"opacity":100});
    };
}
</script>

<script>
window.onload=function(){
    var oDiv1=document.getElementById("p1");
    oDiv1.onmouseover=function(){
        startMove(oDiv1,{"width":100,"height":100,"opacity":100});
    };
}
</script>