js运动缓冲运动

最新推荐文章于 2022-07-12 13:11:05 发布

Alex十年

最新推荐文章于 2022-07-12 13:11:05 发布

阅读量364

点赞数

分类专栏： JavaScript知识总结

本文链接：https://blog.csdn.net/ilikejj0/article/details/79583617

版权

JavaScript知识总结专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1、在计算速度的时候一定要记得取整，因为像素是计算机所能接收到的最小单位，所以如果是299.9px,计算机会认为是299px，计算机也不会给你四舍五入。
2、缓冲运动：逐渐变慢，最后停止。距离越远，速度越大。即速度与距离成正比。速度=（目标值-当前值）/缩放系数
3、缓冲菜单：根据页面滚动的缓冲侧边栏。这个因为会除以2，所以这个目标值也要取整。

侧边滑动框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>侧边滚动菜单栏</title>
        <style>
            #div1{width: 50px;height: 100px;background-color: goldenrod;position: absolute;
            right: 0;bottom: 0;}

        </style>
        <script>


            window.onscroll=function(){
                var div1=document.getElementById('div1');
                var scroll = document.documentElement.scrollTop || document.body.scrollTop;
                 // alert(document.body.scrollHeight);
                //document.body.scrollHeight：因为是body点出的scrollHeight,所以是当前窗口整个的高度
                //document.documentElement.clientHeight：得到的是当前窗口的高度,可视区高度
               // div1.offsetTop：得到的是这个div的最顶端距离整个页面最顶端的高度
               //div1.offsetHeigh,获取元素的高度
               //scroll：得到的是滚动的高度
              // alert(document.documentElement.clientHeight+'---'+div1.offsetHeigh+'---'+scroll+'---'+div1.style.top);
              //div1.style.top = document.documentElement.clientHeight-div1.offsetHeight+scroll+'px';
              startMove(parseInt((document.documentElement.clientHeight-div1.offsetHeight)/2+scroll));
            }

            var time = '';
            function startMove(target){
                var div1=document.getElementById('div1');
                clearInterval(time);
                time=setInterval(function(){
                    var speed = (target-div1.offsetTop)/2;
                    //对于速度，如果速度要取整，所以如果速度大于0，要向上取整，小于0，向下取整。
                    speed = speed>0?Math.ceil(speed):Math.floor(speed);
                    if(div1.offsetTop==target){
                        clearInterval(time);
                    }else{
                        div1.style.top=div1.offsetTop+speed+'px';
                    }
                },30);

            }
        </script>
    </head>
    <body style="height: 2000px;">
        <div id="div1">
        </div>
    </body>
</html>

补充：下面这个代码，因为只是给body设置了2000的高度，虽然div1设置了绝对定位，bottom等于0，但是他的位置仍是在当前页面的最底部，当滚动条滚动时，他的相对于页面背景的位置不会发生改变，但是相对于当前窗口的位置会发生改变。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{width: 50px;height: 100px;background-color: goldenrod;position: absolute;
            right: 0;bottom: 0;}            
        </style>
    </head>
    <body style="height: 2000px;">
        <div id="div1">         
        </div>
    </body>
</html>

缓冲运动停止的条件

<meta charset="UTF-8">
        <title>缓冲运动停止条件</title>
        <style>
            #div1{width: 100px;height: 100px;background-color: #0000FF;position: absolute;left: 600px;}
            #div2{width: 1px;height: 200px;background-color: black;position: absolute;left: 100px;}
            #div3{width: 1px;height: 200px;background-color: black;position: absolute;left: 300px;}
        </style>
        <script>                
            function startMove(target){
                var time='';
                clearInterval(time);
                var div1 = document.getElementById('div1');
                time = setInterval(function(){
                    var speed=0;
                    if(div1.offsetLeft<target){
                        speed=7;
                    }else{
                        speed=-7;
                    }
                    //如果不加if条件来判断，这个蓝色div1块会在实线附近抖动。
                    //if条件句判断的是一个范围，但这个范围的时候，直接使他的left，在实线附近，即target的值。
                    if(Math.abs(div1.offsetLeft-target)<=7){
                        //把定时器关了，然后直接使他的left，在实线附近，即target的值，
                        clearInterval(time);
                        //记得加上px
                        div1.style.left=target+'px';
                    }else{
                        div1.style.left=div1.offsetLeft+speed+'px';
                    }

                },30);
            }           
        </script>
    </head> 
    <body>

        <input id='btn2' type="button" value="到100" onclick="startMove(100)" />
        <input id='btn3' type="button" value="到300" onclick="startMove(300)" />
        <div id='div1'></div>
        <div id='div2'></div>
        <div id='div3'></div>
    </body>
</html>