JS运动框架

运动框架实现思路：
1、 速度 （改变值：left right width height）
透明度： filter:alpha(opacity:30);
capacity:0.3（火狐浏览器）

offsetWidth 与width的区别
元素有border oDiv.style.width = parseInt(oDiv.style.width) -1 + ‘px’;
oDiv.style[‘width’]等同于上部分
获取元素的样式：
obj.currentStyle[attr]; 针对IE浏览器
getComputedStyle (obj, false)[attr]; 针对firefox浏览器
2、 缓冲运动 (非匀速)
speed = ( iTarget-offsetWIdth)/10;
speed = speed>0? Math.ceil(speed):MaMath.floor(speed);
3、 多物体运动 无论是定时器还是透明度，所有值都不能共有
aLi[i].timer=null;
4、 任意值变化 主要针对透明度
Math.round(value) parseFloat(value)

5、 链式运动
在startMove里面再执行一个运动

Window.onload = function(){
var aLi = document.getElementsByTagName(‘li’);
for(var i=0; i<ali.length; i++){
        ali[i].timer = null;
        ali[i].onmouseover = function(){
startMove(this, ‘width’,400,function(){
    startMove(this, ‘height’, 200, function(){
    startMove(this, ‘opacity’, 100);
});
});
        ali[i].onmouseout = function(){
startMove(this, ‘opacity’,300,function(){
    startMove(this, ‘height’, 200, function(){
    startMove(this, ‘width’, 200);
});
});

}
}

function getStyle(obj,attr){
        if(obj.currentStyle){
    return obj.currentStyle[attr];
}else{
    getComputedStyle (obj, false)[attr];
}
}
Function startMove(obj, attr, iTarget, fn){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
        //1、取当前值
            var icur = 0;
if(attr == ‘opacity’){
        icur = Math.round(paseFloat(getStyle(obj, attr))*100);
}else{
        icur = parseInt(getStyle(obj,attr));
}
//2、算速度
var speed = (iTarget - icur)/8;
speed = speed>0? Math.ceil(speed):MaMath.floor(speed);
//3、检测停止
if(icur == iTarget){
        clearInterval(obj.timer);
        if(fn){
            fn();
}
}else{
        if(attr == ‘opacity’){
    obj.style.filter = ‘alpha(opacity:’+ icur + speed +’)’;
    obj.style.opacity = (icur + speed)/100;
}else{
    obj.style[attr] = icur + speed + ‘px’;
}
}
},30)
}

6、 同时运动 让多个属性值同时变
attr 与iTarget 用json格式表示

window.onload = function(){
var oLi = document.getElementById (‘li1’);
oLi.onmouseover = function(){
        startMove(oLi, {width：400，height:200, opacity:100});
}
oLi.onmouseout = function(){
        startMove(oLi, {width：200，height:100, opacity:30});
}

}

function getStyle(obj,attr){
        if(obj.currentStyle){
    return obj.currentStyle[attr];
}else{
    getComputedStyle (obj, false)[attr];
}
}
Function startMove(obj, json, fn){
        Var flag = true;
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            for(var attr in json){
                //1、取当前值
                var icur = 0;
if(attr == ‘opacity’){
            icur = Math.round(paseFloat(getStyle(obj, attr))*100);
}else{
            icur = parseInt(getStyle(obj,attr));
}
//2、算速度
var speed = (json[attr] - icur)/8;
speed = speed>0? Math.ceil(speed):MaMath.floor(speed);
//3、检测停止
if(icur != json[attr] ){
            flag = false;
}else{
        if(attr == ‘opacity’){
    obj.style.filter = ‘alpha(opacity:’+ icur + speed +’)’;
    obj.style.opacity = (icur + speed)/100;
}else{
    obj.style[attr] = icur + speed + ‘px’;
}
}
If(flag){
        clearInterval(obj.timer);
        if(fn){
            fn();
}

}
},30)
}
}