js缓冲运动和匀速运动

最新推荐文章于 2022-02-28 16:48:42 发布

super晴天

最新推荐文章于 2022-02-28 16:48:42 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/jp571534020/article/details/48373829

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.缓冲运动

<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js缓冲运动</title>
    <style>
        #div1{
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
            left: 0px;/*700px*/
            top: 100px;
        }
        #span1{
            position: absolute;
            left: 500px;
            top: 0;
            height: 500px;
            width: 1px;
            background-color: #000;
        }
    </style>
    <script>
        window.οnlοad=function(){
            var oInput=document.getElementById("input1");
            var oDiv=document.getElementById("div1");

            var timer=null;
            function startMove(iTarget){
                clearInterval(timer);
                timer=setInterval(function(){
                    var iSpeed=(iTarget-oDiv.offsetLeft)/8;//缓冲运动速度
                    if(iSpeed>0){
                        iSpeed=Math.ceil(iSpeed);
                    }else{
                        iSpeed=Math.floor(iSpeed);
                    }

                    if(oDiv.offsetLeft==500){
                        clearInterval(timer);
                    }else{
                        oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
                    }

                },30)


            };
            oInput.οnclick=function(){
                startMove(500);
            }
        }
    </script>
</head>
<body>
<input type="button" id="input1" value="开始运动" />
<div id="div1">

</div>
<span id="span1"></span>
</body>
</html></span>

2.匀速运动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js匀速运动</title>
    <style>
        #div1{
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
            left: 0px;/*700px*/
            top: 100px;
        }
        #span1{
            position: absolute;
            left: 500px;
            top: 0;
            height: 500px;
            width: 1px;
            background-color: #000;
        }
    </style>
    <script>
        window.οnlοad=function(){
            var oInput=document.getElementById("input1");
            var oDiv=document.getElementById("div1");

            var timer=null;
            function startMove(iTarget){
                clearInterval(timer);
                timer=setInterval(function(){
                    var iSpeed=iTarget>oDiv.offsetLeft>0?7:-7;
//                    if(iTarget>oDiv.offsetLeft){
//                        iSpeed=7
//                    }else{
//                        iSpeed=-7;
//                    }
                    if(Math.abs(oDiv.offsetLeft-iTarget)<=7){
                        oDiv.style.left=iTarget+'px';
                        clearInterval(timer);
                    }else{
                        oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
                    }
                },30)


            };
            oInput.οnclick=function(){
                startMove(500);
            }
        }
    </script>
</head>
<body>
<input type="button" id="input1" value="开始运动" />
<div id="div1">

</div>
<span id="span1"></span>
</body>
</html>