码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2014-10-21 19:46:51      阅读：255      评论：0      收藏：0      [点我收藏+]

标签：style   color   io   os   ar   java   for   sp   div   

***********************缓冲运动【框架开始】-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>

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

标签：style   color   io   os   ar   java   for   sp   div   

原文地址：http://blog.csdn.net/xiaomogg/article/details/40348021
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！