***********************缓冲运动【框架開始】-1.html*********************************************
<!DOCTYPE html>
<html><head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{background-color:#666;}
div{width:100px;height:50px;margin:20px 0;background:yellow;border:1px solid seagreen;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oDiv=document.getElementsByTagName("div");
var i=0;
oDiv[0].οnclick=function()
{
startMove(this,"width",300);
};
oDiv[1].οnclick=function()
{
startMove(this,"height",300);
};
oDiv[2].οnclick=function()
{
startMove(this,"fontSize",300);
};
oDiv[3].οnclick=function ()
{
startMove(this, 'borderWidth', 50);
}
};
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, attr, iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var iCur=parseInt(getStyle(obj, attr));
var iSpeed=(iTarget-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur==iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}, 30)
}
</script>
</head>
<body>
<div></div>
<div></div>
<div>AAAA+++</div>
<div></div>
<div></div>
<div></div>
</body>
</html>
***************************缓冲运动【框架開始】-2.html*****************************************
<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
         body{background-color:#666;}
         div{width:100px;height:50px;margin:20px 0;background:yellow;border:1px solid seagreen;filter:alpha(opacity:30);opacity:0.3;}
     </style>
     <script type="text/javascript">
         window.οnlοad=function(){
             var oDiv=document.getElementsByTagName("div");
             var i=0;
             var alpha=30;
            oDiv[0].οnclick=function()
            {
                startMove(this,"width",300);
            };
             oDiv[1].οnclick=function()
             {
                 startMove(this,"height",300);
             };
             oDiv[2].οnclick=function()
             {
                 startMove(this,"fontSize",300);
             };
             oDiv[3].οnclick=function ()
             {
                 startMove(this, 'borderWidth', 50);
             }
             oDiv[4].οnmοuseοver=function ()
             {
                 startMove(oDiv[4], 'opacity', 100);
             }
             oDiv[4].οnmοuseοut=function ()
             {
                 startMove(oDiv[4], 'opacity', 30);
             }
         };
         function getStyle(obj, attr)
         {
             if(obj.currentStyle)
             {
                 return obj.currentStyle[attr];
             }
             else
             {
                 return getComputedStyle(obj, false)[attr];
             }
         }
         function startMove(obj, attr, iTarget)
         {
             clearInterval(obj.timer);
             obj.timer=setInterval(function (){
                 var iCur=0;
                 if(attr=='opacity')
                 {
                     iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
                 }
                 else
                 {
                     iCur=parseInt(getStyle(obj, attr));
                 }
                 var iSpeed=(iTarget-iCur)/8;
                 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                 if(iCur==iTarget)
                 {
                     clearInterval(obj.timer);
                 }
                 else
                 {
                     if(attr=="opacity")
                     {
                         obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                         obj.style.opacity=(iCur+iSpeed)/100;
                     }
                     else
                     {
                         obj.style[attr]=iCur+iSpeed+'px';
                     }
                 }
             }, 30)
         }
     </script>
 </head>
 <body>
 <div></div>
 <div></div>
 <div>AAAA+++</div>
 <div></div>
 <div></div>
 <div></div>
 </body>
 </html>
*******************框架開始之链式运动1****************************
<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
         div{width:100px;height:50px;margin:20px 0;position:absolute;top:0;background:yellow;border:1px solid seagreen;}
     </style>
     <script type="text/javascript">
         window.οnlοad=function ()
         {
             var oDiv=document.getElementById('div1');
             oDiv.οnmοuseοver=function ()
             {
                 startMove(oDiv, 'width', 300, function (){
                     startMove(oDiv, 'height', 300, function (){
                         startMove(oDiv, 'opacity', 100);
                     });
                 });
             };
             oDiv.οnmοuseοut=function ()
             {
                 startMove(oDiv, 'opacity', 30, function (){
                     startMove(oDiv, 'height', 100, function (){
                         startMove(oDiv, 'width', 100);
                     });
                 });
             };  //不错,非常好,但是还有更好的办法么,这样每一个值都须要回调不是太麻烦了么
             //同一时候假设我想同一时候运行多个值的变化呢。不行了吧
             // startMove(oDiv, 'width', 100);startMove(oDiv, 'height', 100);这样写也是不行的 第二个会把第一个的定时器改关闭掉
         };
         function getStyle(obj, attr)
         {
             if(obj.currentStyle)
             {
                 return obj.currentStyle[attr];
             }
             else
             {
                 return getComputedStyle(obj, false)[attr];
             }
         }
         function startMove(obj, attr, iTarget,fn)
         {
             clearInterval(obj.timer);
             obj.timer=setInterval(function (){
                 var iCur=0;
                 if(attr=='opacity')
                 {
                     iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
                 }
                 else
                 {
                     iCur=parseInt(getStyle(obj, attr));
                 }
                 var iSpeed=(iTarget-iCur)/8;
                 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                 if(iCur==iTarget)
                 {
                     clearInterval(obj.timer);
                     if(fn)  //运动停止的时候,假设有传递第四个參数的时候 就执行
                     {
                         fn();
                     }
                 }
                 else
                 {
                     if(attr=="opacity")
                     {
                         obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                         obj.style.opacity=(iCur+iSpeed)/100;
                     }
                     else
                     {
                         obj.style[attr]=iCur+iSpeed+'px';
                     }
                 }
             }, 30)
         }
     </script>
 </head>
 <body>
 <div id="div1"></div>
 </body>
 </html>
*******************框架開始之链式运动2****************************
<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
         body{background:darkgray;}
         span{position: fixed;top:300px;width:100%;height:0;border-bottom:1px solid red;}
         div{width:100px;height:50px;margin:20px 0;position:absolute;top:0;background:yellow;border:1px solid seagreen;opacity:0.3;filter:alpha(opacity:30);}
     </style>
     <script type="text/javascript">
         window.οnlοad=function ()
         {
             var oDiv=document.getElementById('div1');
             oDiv.οnclick=function ()
             {
                 startMove(oDiv,{width:102,height:300,opacity:100})//第一个究竟目标的时候 就会清楚定时器,其它的值也会停止
             };
         };
         function getStyle(obj, attr)
         {
             if(obj.currentStyle)
             {
                 return obj.currentStyle[attr];
             }
             else
             {
                 return getComputedStyle(obj, false)[attr];
             }
         }
         function startMove(obj,json,fn)
         {
             clearInterval(obj.timer);
             obj.timer=setInterval(function (){
               for(var attr in json)
               {
                 var iCur=0;
                 if(attr=='opacity')
                 {
                     iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
                 }
                 else
                 {
                     iCur=parseInt(getStyle(obj, attr));
                 }
                 var iSpeed=(json[attr]-iCur)/8;
                 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                 if(iCur==json[attr])
                 {
                     clearInterval(obj.timer);
                     if(fn)  //运动停止的时候,假设有传递第四个參数的时候 就执行
                     {
                         fn();
                     }
                 }
                 else
                 {
                     if(attr=="opacity")
                     {
                         obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                         obj.style.opacity=(iCur+iSpeed)/100;
                     }
                     else
                     {
                         obj.style[attr]=iCur+iSpeed+'px';
                     }
                 }
               }
             }, 30)
         }
     </script>
 </head>
 <body>
 <div id="div1"></div>
 <span></span>
 </body>
 </html>
*******************框架開始之链式运动3  json****************************
<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
         div{width:100px;height:50px;margin:20px 0;position:absolute;top:0;background:yellow;border:1px solid seagreen;}
     </style>
     <script type="text/javascript">
         window.οnlοad=function ()
         {
             var oDiv=document.getElementById('div1');
             oDiv.οnclick=function ()
             {
                 startMove(oDiv,{width:"300",height:"300",top:"300",opacity:"100"})
             };
         };
         function getStyle(obj, attr)
         {
             if(obj.currentStyle)
             {
                 return obj.currentStyle[attr];
             }
             else
             {
                 return getComputedStyle(obj, false)[attr];
             }
         }
         function startMove(obj,json,fn)
         {
             clearInterval(obj.timer);
             obj.timer=setInterval(function (){
               for(var attr in json)
               {
                 var iCur=0;
                 if(attr=='opacity')
                 {
                     iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
                 }
                 else
                 {
                     iCur=parseInt(getStyle(obj, attr));
                 }
                 var iSpeed=(json[attr]-iCur)/8;
                 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                 if(iCur==json[attr])
                 {
                     clearInterval(obj.timer);
                     if(fn)  //运动停止的时候,假设有传递第四个參数的时候 就执行
                     {
                         fn();
                     }
                 }
                 else
                 {
                     if(attr=="opacity")
                     {
                         obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                         obj.style.opacity=(iCur+iSpeed)/100;
                     }
                     else
                     {
                         obj.style[attr]=iCur+iSpeed+'px';
                     }
                 }
               }
             }, 30)
         }
     </script>
 </head>
 <body>
 <div id="div1"></div>
 </body>
 </html>
******************框架開始之链式运动 json 停止条件**************************
<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
         body{background:darkgray;}
         span{position: fixed;top:300px;width:100%;height:0;border-bottom:1px solid red;}
         div{width:100px;height:50px;margin:0;position:absolute;top:0;background:yellow;border:1px solid seagreen;opacity:0.3;filter:alpha(opacity:30);}
     </style>
     <script type="text/javascript">
         window.οnlοad=function ()
         {
             var oDiv=document.getElementById('div1');
             oDiv.οnclick=function ()
             {
                 startMove(oDiv,{width:102,height:300,opacity:100})//第一个究竟目标的时候 就会清楚定时器,其它的值也会停止
             };
         };
         function getStyle(obj, attr)
         {
             if(obj.currentStyle)
             {
                 return obj.currentStyle[attr];
             }
             else
             {
                 return getComputedStyle(obj, false)[attr];
             }
         }
         function startMove(obj,json,fn)
         {
             clearInterval(obj.timer);
             obj.timer=setInterval(function (){
                 varbStop=true;//所用的东西都到达
               for(var attr in json)
               {
                 var iCur=0;
                 if(attr=='opacity')
                 {
                     iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
                 }
                 else
                 {
                     iCur=parseInt(getStyle(obj, attr));
                 }
                 var iSpeed=(json[attr]-iCur)/8;
                 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                   if(iCur!=json[attr]) {
                       bStop = false;
                   }
                     if(attr=="opacity")
                     {
                         obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                         obj.style.opacity=(iCur+iSpeed)/100;
                     }
                     else
                     {
                         obj.style[attr]=iCur+iSpeed+'px';
                     }
                   if(bStop)
                   {
                       clearInterval(obj.timer);
                       if(fn)  //运动停止的时候。假设有传递第四个參数的时候 就执行
                       {
                           fn();
                       }
                   }
               }
             }, 30)
         }
     </script>
 </head>
 <body>
 <div id="div1"></div>
 <span></span>
 </body>
 </html>
**********************************伸缩菜单 简单框架实例**************************************************
<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
         ul,ol{list-style: none;margin:0;padding:0;}
         ul li{position:relative;width:90px;height:25px;line-height: 25px;text-align: center;float:left;border:1px solid #666666;margin:1px;background:yellowgreen;}
         ol{background:#CCC; overflow:hidden; position:absolute; top:25px; width:100%; height:0; filter:alpha(opacity:0); opacity:0;}
         ol li{border:none;margin:0;background:yellowgreen;border-bottom:1px solid darkslategrey;}
     </style>
     <script type="text/javascript">
         window.οnlοad=function ()
         {
             var aLi=document.getElementsByTagName("li");
             var i=0;
             for(i=0;i<aLi.length;i++) {
             aLi[i].onmouseover = function () {
                 var oDiv = this.getElementsByTagName('ol')[0];
                 oDiv.style.height = 'auto';
                 var iHeight = oDiv.offsetHeight;
                 oDiv.style.height = 0;
                 startMove(oDiv, {opacity: 100, height: iHeight});
             };
                 aLi[i].onmouseout = function () {
                     var oDiv = this.getElementsByTagName('ol')[0];
                     oDiv.style.height = 'auto';
                     var iHeight = oDiv.offsetHeight;
                     oDiv.style.height = 0;
                     startMove(oDiv, {opacity:0, height:0});
                 };
         }
         };
         function getStyle(obj, attr)
         {
             if(obj.currentStyle)
             {
                 return obj.currentStyle[attr];
             }
             else
             {
                 return getComputedStyle(obj, false)[attr];
             }
         }
         function startMove(obj,json,fn)
         {
             clearInterval(obj.timer);
             obj.timer=setInterval(function (){
               for(var attr in json)
               {
                 var iCur=0;
                 if(attr=='opacity')
                 {
                     iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
                 }
                 else
                 {
                     iCur=parseInt(getStyle(obj, attr));
                 }
                 var iSpeed=(json[attr]-iCur)/8;
                 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                 if(iCur==json[attr])
                 {
                     clearInterval(obj.timer);
                     if(fn)  //运动停止的时候,假设有传递第四个參数的时候 就执行
                     {
                         fn();
                     }
                 }
                 else
                 {
                     if(attr=="opacity")
                     {
                         obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                         obj.style.opacity=(iCur+iSpeed)/100;
                     }
                     else
                     {
                         obj.style[attr]=iCur+iSpeed+'px';
                     }
                 }
               }
             }, 30)
         }
     </script>
 </head>
 <body>
 <ul>
     <li>
         首页
         <ol>
             <li>AAAAAA</li>
             <li>BBBBBB</li>
             <li>CCCCCC</li>
             <li>DDDDDDD</li>
             <li>EEEEEEE</li>
             <li>FFFFFFF</li>
         </ol>
     </li>
     <li>
         css
         <ol>
             <li>AAAAAA</li>
             <li>BBBBBB</li>
             <li>CCCCCC</li>
             <li>DDDDDDD</li>
             <li>EEEEEEE</li>
             <li>FFFFFFF</li>
         </ol>
     </li>
     <li>
         html
         <ol>
             <li>AAAAAA</li>
             <li>BBBBBB</li>
             <li>CCCCCC</li>
             <li>DDDDDDD</li>
             <li>EEEEEEE</li>
             <li>FFFFFFF</li>
         </ol>
     </li>
     <li>
         javascript
         <ol>
             <li>AAAAAA</li>
             <li>BBBBBB</li>
             <li>CCCCCC</li>
             <li>DDDDDDD</li>
             <li>EEEEEEE</li>
             <li>FFFFFFF</li>
         </ol>
     </li>
     <li>
         jQuery
         <ol>
             <li>AAAAAA</li>
             <li>BBBBBB</li>
             <li>CCCCCC</li>
             <li>DDDDDDD</li>
             <li>EEEEEEE</li>
             <li>FFFFFFF</li>
         </ol>
     </li>
 </ul>
 </body>
 </html>