JS 完美运动框架 [ 萌新朝这看 ]

·

一、首先是一段废话

第一次用简书写文章，都说Markdown很好用，于是就了解了下~
感觉确实好好用，大家也用起来~

二、言归正传-今天说一下 js 的动画

js动画无非就是：上下左右移、改透明度、换颜色、变宽高，and so on....
当然这些其实没有像我说的这么轻松哈 - -!
我个人感觉js动画还是很重要的，所以最近就研究了下。

1. 首先写个简单的html

<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

然后是多物体同时运动函数：startMove()

/*
- obj 指的是DOM对象
- json 指的是 CSS样式
*/
function startMove(obj,option,fn){
    var flag = true;//标杆
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        for(var attr in option){
            var icur = 0;
            if(attr == 'opacity'){
                // icur = parseFloat(getStyle(obj,attr))*100;
                icur = Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
                icur = parseInt(getStyle(obj,attr));
            }
            var speed = (option[attr] - icur)/8;
            speed = speed>0?(Math.ceil(speed)):(Math.floor(speed));
            if(icur != option[attr]){
                flag = false;
            }
            if(attr == 'opacity'){
                obj.style.filter = 'alpha(opacity:'+ (icur + speed) +')';
                obj.style.opacity = (icur + speed)/100;
            }else{
                obj.style[attr] = icur + speed +'px';//obj.style.width = obj.style['width']
            }
        }
        if(flag){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },30);
}

这里的 “ option ”代表的其实是一个 object，在这里我给它的键和值是CSS样式，如下：
{'opacity':100,'width':201,'height':200,'paddingRight':100}

好了，继续正题..
这里还有一个用于获取元素样式的函数：

function getStyle(obj,attr){
    if(obj.currentStyle){  //如果是IE浏览器
         return obj.currentStyle[attr];
        }else{                       //firefox / chrome
         return getComputedStyle(obj,false)[attr];
    }
}

下面是函数运行代码：

window.onload = function(){
    var ali = document.getElementsByTagName('li');
    for(var i=0;i<ali.length;i++){
        ali[i].onmouseover = function(){
            startMove(this,{'opacity':100,'width':201,'height':200});
        }
        ali[i].onmouseout = function(){
            startMove(this,{'opacity':30,'width':200,'height':100});
        }
    }
}

好了，就这些~
欢迎吐槽O(∩_∩)O~