DOM高级：运动原理-＞匀速运动-＞加减速运动-＞缓冲运动

最新推荐文章于 2024-11-07 13:56:28 发布

John_Wick___

最新推荐文章于 2024-11-07 13:56:28 发布

阅读量183

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/John_Wick___/article/details/118795418

版权

运动原理

运动原理：javaScript实现运动的原理，就是通过定时器不断改
变元素的位置，直至达到目标点后停止活动。通常，要让元素动
起来，我们会通过改变元素的left 和top值来改变元素的相对位
置。

方法

1、运动的物体使用绝对定位
2、通过改变定位物体的属性(right/left/top/bottom)值来使
物体移动，如:向右或者向左移动可以使用offsetleft
（offsetright）来控制左右移动

步骤

1、开始运动前清除已有定时器。(因为，连续点击按钮，
物体会运动越来越快，造成运动混乱)；
2、开启定时器，计算速度；
3、把运动和停止隔开(if/else),判断停止条件，执行运动

案列匀速运动

<style>
#box{width="100px";
height="100px";
background="red";
position:absolute}
</style>
<body>
<button onclick="startMove()" id="btn">开始</button>
<div id="box"></div>
</body>
<script>
var btn=document.getElementById("btn");
var box=document.querySolector("div");
let time=null;
function startMove(){
clearInterval(time);
setInterval(function(){
//让盒子一次向右移动5px
box.style.left=box.offsetleft+5+"px";
//做判断，移动到什么位置的时候停止运动
if(box.offsetleft>300){
box.style.left="300px"
//到达目的时清除定时器
clearInterval(time)
}
},50)
}
//函数开头就清除定时器的原因是，第一次点击是+5“px”
//第二次点击就是在+5px的基础上在加5px，易造成运动混乱。
</script>

匀速运动的优化：往返运动

<style>
div{width="200px";height="200px";
position=absolute;background="red"}

</style>
<button onclick="move(300)">向左</button>
<button onclick="move(0)">向右</button>
<div></div>
<script>
let div =document.querySelector("div");
let time=null;
function move(obj){
//同样事件函数的第一步是清除定时器
clearInterval(time)
time=setInterval(function(){
//判断目标位置，div应往左还是右跑
let speed=obj-div.offsetleft>0?5:-5
 div.style.left=div.offsetleft+speed+"px";
 //判断一下到目的地后停止计时器
 if(div.style.left==0||div.style==300){
 clearInterval(time)}
},50)
}


</script>

匀速透明运动

<style>

div{width="200px";height="200px"position="absolute"
opacity=0.3;}
</style>
<body>


<button onmouseover="move(0.1)" onmouseout=
"move(1)"></button>
<div></div>

</body>
<script>
//封装一个获取非行间样式的函数,obj是对象，attr是值
function getstyle(ojb,attr){
if(job.currentStyle){
return job.currentStyle[attr]}
}else{
//针对非IE浏览器
return job.getComputedStyle(obj,false)[attr]
}
let div=document.querySelector("div")
let ys=getstyle(div,"opacity");//值的返回为字符串
let time=null；
function(target){
time=setInterval(function(){
//设置一个速度（透明度值）
let speed=ys-target<0?0.01:-0.01
//因为获取的非行间样式返回是字符串，所以将转为数字
div.style.opacity=Number(getstyle(div,"opacity"))
+speed
//加个判断，什么时候该停止计时器
if(div.style.opacity==0||div.style.opacity==1){
clearInterval(time)
}
},50)
}

</script>

缓冲运动与封装

原理：let speed=(mubiao-obj.offsetLeft)10;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);

过程、步骤

<style>
div{ height: 100px;
     width: 100px;
     background: red;
     position: absolute;
     top: 200px;
     left: 0px;
    }
</style>
    <body>
<button id = >起飞</button>
   <div > </div>
    </body>
    <script>
let div=document.quertSelector("div");
let button=document.quertSelector("button");
let time=null;
function fei(obj,mubiao){
clearInterval(time);
time=setInterval(function(){
et speed=(mubiao-obj.offsetLeft)10;
speed=speed>0?Math.ceil(speed):Math.floor("speed");
obj.style.left=obj.offsteLeft+speed+"px";
},50)
}
button.onclick=function (){
fei(div,300)
}
</script>