点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

效果：

思路：

首先，多功能框架实现的功能是:css中所有的属性都可以添加进去（也可以把方法作为参数传递过去！），然后进行缓冲运动，比如：物体的高度、长度、颜色、字体大小、透明度等，都可以直接传入参数然后进行运动，简单的说是利用json字符串把数据拼接起来，然后进行传参，参数传入进去到函数以后，根据参数的对象，还有属性，还有函数方法，然后再利用setInterval进行缓冲运动，最后判断运动什么时候结束。有一点要注意的是先用getStyle方法获取非行间样式！！！

代码：

 <head id="Head1" runat="server">
     <title></title>
     <style type="text/css">
         div
         {
             width: 100px;
             height: 100px;
             background: #00FF00;
             left: ;
             position: absolute;
             font-size: ;
             opacity: 0.3;
         }
     </style>
     <script type="text/javascript">
         window.onload = function () {
             var divOn = document.getElementById('div1');
             divOn.timer = null;
             divOn.onmouseover = function () {
                 move(divOn, { width: , height: , fontSize: , opacity:  });
             };
             divOn.onmouseout = function () {
                 move(divOn, { opacity: , height: , fontSize: , width:  });
             };
         }
 //-----以下为多功能缓冲框架部分---------------------------------------------------------------------------------------------------------
         //获取非行间样式
         function getStyle(ojb, name) {
             if (ojb.currentStyle) {
                 return ojb.currentStyle[name];
             }
             else {
                 return getComputedStyle(ojb, false)[name];
             }
         }
         //缓冲运动json的应用
         //json{attr,finsh}
         //json{width:200,height:200}
         function move(obj, json, fnName) {      //obj是对象，Json是对象的属性， fnName是函数
             clearInterval(obj.timer);           //关闭之前的计时器
             obj.timer = setInterval(function () {
                 var timeStop = true;        //记录属性是否都已经执行完成
                 for (var attr in json) {        //遍历json中的数据
                     var oGetStyle = ;
                     if (attr == 'opacity') {  //判断透明度
                         oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * );      //透明度取整，然后转换完后赋值
                     }
                     else {
                         oGetStyle = parseInt(getStyle(obj, attr));
                     }
                     var speed = (json[attr] - oGetStyle) / ;       //求速度
                     speed = speed >  ? Math.ceil(speed) : Math.floor(speed);  //进位取整
                     //            if (oGetStyle == json[attr]) {      //如果到达，则关闭计时器
                     //                clearInterval(obj.timer);
                     //                if (fnName) {       //当关闭计时器后要执行的函数
                     //                    fnName();
                     //                }
                     //            }
                     //            else {
                     if (oGetStyle != json[attr])
                         timeStop = false;
                     if (attr == 'opacity') {    //透明度
                         obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')';    //给透明度赋值
                         obj.style.opacity = (oGetStyle + speed) / ;
                     }
                     else {
                         obj.style[attr] = oGetStyle + speed + 'px';     //移动div
                     }
                     //            }
                 }
                 if (timeStop) {     //如果所有属性都已经执行完成，那么就关闭计时器
                     clearInterval(obj.timer);
                     if (fnName) {       //当关闭计时器后要执行的函数
                         fnName();
                     }
                 }
             }, )
         }
  //-----------------------------------------------------------------------------------------------------------------------
         </script>
 </head>
 <body>
     <div id="div1">
         青苹果
     </div>
 </body>