适用于CSS2的各种运动的javascript运动框架

    <script>
     window.onload = function() {
             //var oDiv1 = document.getElementById('box1');
             //var oDiv2 = document.getElementById('box2');
             // oDiv1.timer = null;
             var oDiv = document.getElementsByTagName('div');

             for (var i = 0; i < oDiv.length; i++) {
                 oDiv[i].timer = null;
                 oDiv[i].onmouseover = function() {
                     var that = this;                                    //闭包的关系，把this传递过去
                     startMove(this, {'width': 205, 'height': 500},function(){
                         startMove(that, {'opacity': 100});
                     });
                     //alert(getStyle(this,'opacity'))
                 }
                 oDiv[i].onmouseout = function() {
                     var that = this;
                     startMove(this, {'width': 200,'height':200}, function(){
                         startMove(that, {'opacity': 30});
                     });
                 }
             }
         }
         //var timer = null;
     function getStyle(obj,name){　　　　　　　　　　//获取样式的函数
         if(obj.currentStyle){
             return obj.currentStyle[name];    //这里用这种形式的原因是name是以字符串的形式传递过来的
         } else{
             return getComputedStyle(obj,false)[name];       //得到加上边框的总宽
         }
     }
     //startMove(onj,{width: 200, height: 200}, fnEnd)
     function startMove(obj, json, fnEnd) {
         clearInterval(obj.timer);
         obj.timer = setInterval(function() {
             var bStop = true;                   //开了定时器之后设立一个假设：所有运动都停止了，那些把假设设到定时器外面的都是错误的方法
             for(var attr in json){
             var cur = 0;
             if(attr == "opacity"){
                 cur = Math.round(parseFloat(getStyle(obj,attr)) * 100);     //要取整
             } else {
                 cur = parseInt(getStyle(obj,attr))
             }
             var speed = (json[attr] - cur) / 10; //
             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
             if (cur !== json[attr]) {               //如果某次循环的值不等于目标值，
                 bStop = false;                          //假设不成立
             };
                 if (attr == "opacity"){
                 obj.style.opacity = (speed + cur)/100;
                 obj.style.filter = 'alpha(opacity:'+ (speed + cur) +')';
                 } else{
                     obj.style[attr] = cur + speed + 'px';
                 }
         }
         if(bStop){                                          //所有的假设都成立了，才关闭定时器
             clearInterval(obj.timer);
             if(fnEnd) fnEnd();                              //如果有回调函数，则执行回掉函数
         }
         }, 30)
     }
     </script>

html代码

  <div id="box1"></div>
  <div id="box2"></div>

css代码

  div {
         width: 200px;
         height: 200px;
         background: purple;
         border: 10px solid maroon;
         margin-top: 10px;
         opacity: 0.3;
         filter: alpha(opacity: 30);
     }

全手打，亲测可用，支持多物体，多属性，链式，同时运动。