javaScript之JS运动

最新推荐文章于 2022-04-14 22:17:01 发布

zu大王

最新推荐文章于 2022-04-14 22:17:01 发布

阅读量273

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_41972088/article/details/111226103

版权

1. 匀速运动
原理：从头到尾一直保持一个速度，即每次运动相同的距离，也称为平滑运动。
分析：①实现匀速运动效果，我们先设置元素样式，然后通过 document.getElementById(id)获取到对应的id节点元素。
②关闭上一次定时器
③定义speed速度（可以随意定义运动的速度值）
④设置运动和停止分开

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        	//css样式设置
            *{margin: 0px; padding: 0px;}
            #div1{width: 100px; height: 100px; background-color: red; position: absolute; left: 0px; top: 200px;}
        </style>
        <script>
            window.onload = function (){
                var oBtn = document.getElementById("btn1");//获取btn1元素节点
                var oDiv = document.getElementById("div1");//获取div1元素节点

                oBtn.onclick = function(){
                    clearInterval(timer);//关闭上一次定时器
                    var speed = 8;//设置速度为8

                    var timer = setInterval(function(){//记录定时器返回值，设置定时器，30ms运动一下
                        if(oDiv.offsetLeft >= 500){
                            clearInterval(timer);//如果运动到目的值，关闭定时器
                        }else{
                            oDiv.style.left = oDiv.offsetLeft + speed + "px";//运动方式
                        }
                    },30);
                }
            }
        </script>
    </head>
    <body>
        <button id = 'btn1'>开始运动</button>
        <div id = 'div1'></div>
    </body>
</html>

2. 减速运动
原理：也被称为缓冲运动，指的是远快近慢，然后慢慢的停止在目标点。离目标点距离越远运动越快，离目标越近速度越慢。
分析：根据距离的远近，调整运动值的大小。
计算公式：距离=（目标值-当前值）/缩放比例

var o=document.getElementByTagName('div')[0];
o.onclick=function(){
var timer=setInterval(function(){
var cur=parseInt(getStyle(o,'left'));
var speed=(500-cur)/10; //速度=（目标值-当前值）/缩放比例
if(cur=500){
clearInterval(timer);
o.style.left=speed+'px';
}
},30)
}