js运动-弹性运动

最新推荐文章于 2020-10-13 17:51:55 发布

della_uii

最新推荐文章于 2020-10-13 17:51:55 发布

阅读量785

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：弹性运动弹性运动菜单

本文链接：https://blog.youkuaiyun.com/Della_UI/article/details/53166441

JavaScript 专栏收录该内容

33 篇文章

订阅专栏

运动原理：加速运动+减速运动+摩擦运动；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #btn{
                margin: 50px;
            }
            #div1{
                width: 100px;
                height: 100px;
                background: olive;
                position: absolute;
                top: 100px;
                left: 0;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oBtn=document.getElementById("btn");
                var oDiv=document.getElementById("div1");

                var iSpeed=0;

                oBtn.onclick=function(){
                    startMove(oDiv,500);
                }

                function startMove(obj,iTarget){
                    clearInterval(obj.timer);
                    obj.timer=setInterval(function(){
                        iSpeed+=(iTarget-obj.offsetLeft)/5; //加减速运动的速度
                        iSpeed*=0.7;//摩擦损失

                        //在速度接近于零且距离目标点的距离接近于零的时候即判断物体到达终点，此时清除定时器且手动把速度和距目标点的距离归零。
                        if ( Math.abs(iSpeed)<1 && Math.abs(iTarget-obj.offsetLeft)<1 ) {
                            clearInterval(obj.timer);
                            iSpeed=0;
                            obj.style.left=iTarget+'px';
                        }else{
                            obj.style.left=obj.offsetLeft+iSpeed+'px';
                        }

                    },30)
                }
            }
        </script>
    </head>
    <body>
        <input id="btn" type="button" value="运动" />
        <div id="div1"></div>
    </body>
</html>

应用：弹性菜单

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#ul1{ width:428px; height:30px; margin:20px auto; position:relative;}
#ul1 li{ width:100px; height:30px; background:red; border:1px #000 solid; margin-right:5px; float:left; list-style:none; line-height:30px; text-align:center;}
#ul1 #mark{ position:absolute; left:0; top:0; overflow:hidden;}
#ul1 #mark ul{ width:428px; position:absolute; left:-1px; top:-1px; color:white;}
</style>
<script>
window.onload = function(){
    var oMark = document.getElementById('mark');
    var aBox = document.getElementsByClassName('box');

    var childUl = oMark.getElementsByTagName('ul')[0];

    var timer = null;
    var timer2 = null;
    var iSpeed = 0;

    for(var i=0;i<aBox.length;i++){
        aBox[i].onmouseover = function(){
            clearTimeout(timer2);
            startMove( this.offsetLeft );
        };

        aBox[i].onmouseout = function(){
            timer2 = setTimeout(function(){
                startMove( 0 );
            },100);
        };
    }

    oMark.onmouseover = function(){
        clearTimeout(timer2);
    };

    oMark.onmouseout = function(){
        timer2 = setTimeout(function(){
            startMove( 0 );
        },100);
    };

    function startMove(iTarget){
        clearInterval(timer);
        timer = setInterval(function(){

            iSpeed += (iTarget - oMark.offsetLeft)/6;
            iSpeed *= 0.75;

            if( Math.abs(iSpeed)<=1 && Math.abs(iTarget - oMark.offsetLeft)<=1 ){
                clearInterval(timer);
                oMark.style.left = iTarget + 'px';
                childUl.style.left = -iTarget + 'px';
                iSpeed = 0;
            }
            else{
                oMark.style.left = oMark.offsetLeft + iSpeed + 'px';
                childUl.style.left = - oMark.offsetLeft + 'px';
            }

        },30);
    }

};
</script>
</head>

<body>
<ul id="ul1">
    <li id="mark">
        <ul>
            <li>首页</li>
            <li>论坛</li>
            <li>视频</li>
            <li>留言</li>
        </ul>
    </li>
    <li class="box">首页</li>
    <li class="box">论坛</li>
    <li class="box">视频</li>
    <li class="box">留言</li>
</ul>
</body>
</html>

弹性过界：
IE8-浏览器存在弹性过界问题，当宽度width或高度height等不能出现负值的样式出现负值时将会报错。所以，需要判断样式为高度或宽度时，样式值小于0时，等于0。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #div1{
                width: 100px;
                height: 30px;
                background: olive;
                margin: 30px auto 0;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oDiv=document.getElementById("div1");

                var iTimer=null;
                var iSpeed=0;

                oDiv.onmouseover=function(){
                    startMove(300);
                }

                oDiv.onmouseout=function(){
                    startMove(30);
                }

                function startMove(iTarget){

                    clearInterval(iTimer);

                    iTimer=setInterval(function(){
                        iSpeed+=(iTarget-oDiv.offsetHeight)/5;
                        iSpeed*=0.7;

                        if ( Math.abs(iSpeed)<1 && Math.abs(iTarget-oDiv.offsetHeight)<1 ) {
                            clearInterval(iTimer);
                            iSpeed=0;
                            oDiv.style.height=iTarget+'px';
                        }else{
                            var H=oDiv.offsetHeight+iSpeed;

                            if (H<0) {
                                H=0;
                            }

                            oDiv.style.height=H+'px';
                        }


                    },30)
                }
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>