首页 > 代码库 > 缓冲运动之框架開始一级简单框架实例

缓冲运动之框架開始一级简单框架实例

***********************缓冲运动【框架開始】-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.onload=function(){
            var oDiv=document.getElementsByTagName("div");
            var i=0;
           oDiv[0].onclick=function()
           {
               startMove(this,"width",300);
           };
            oDiv[1].onclick=function()
            {
                startMove(this,"height",300);
            };
            oDiv[2].onclick=function()
            {
                startMove(this,"fontSize",300);
            };
            oDiv[3].onclick=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.onload=function(){
            var oDiv=document.getElementsByTagName("div");
            var i=0;
            var alpha=30;
           oDiv[0].onclick=function()
           {
               startMove(this,"width",300);
           };
            oDiv[1].onclick=function()
            {
                startMove(this,"height",300);
            };
            oDiv[2].onclick=function()
            {
                startMove(this,"fontSize",300);
            };
            oDiv[3].onclick=function ()
            {
                startMove(this, ‘borderWidth‘, 50);
            }
            oDiv[4].onmouseover=function ()
            {


                startMove(oDiv[4], ‘opacity‘, 100);
            }
            oDiv[4].onmouseout=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.onload=function ()
        {
            var oDiv=document.getElementById(‘div1‘);


            oDiv.onmouseover=function ()
            {
                startMove(oDiv, ‘width‘, 300, function (){
                    startMove(oDiv, ‘height‘, 300, function (){
                        startMove(oDiv, ‘opacity‘, 100);
                    });
                });
            };


            oDiv.onmouseout=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.onload=function ()
        {
            var oDiv=document.getElementById(‘div1‘);


            oDiv.onclick=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.onload=function ()
        {
            var oDiv=document.getElementById(‘div1‘);


            oDiv.onclick=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.onload=function ()
        {
            var oDiv=document.getElementById(‘div1‘);


            oDiv.onclick=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.onload=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>

缓冲运动之框架開始一级简单框架实例