目录
一,匀速运动
- 实现原理:
- 核心:通过定时器setinterval()不断移动盒子的位置
- 步骤:获得盒子当前的位置,通过(盒子的offsetleft)来获取
- 让盒子在当前位置上加上移动距离
- 利用定时器不断重复这个操作
- 加上一个结束定时器的条件
- 重点:offsetleft只能获取,不能赋值,需要使用styleleft来赋值
- 多个元素设置,使用函数封装,使用直接调用即可
- 注意,要操作盒子的移动必须给元素添加定位,用style.left赋值操作,需要加上单位
<style type="text/css"> *{ padding:0px; margin:0px; } .box{ width: 200px; height: 200px; background: blue; position: absolute; /* 核心 */ left:0px } .box2{ background: red; margin-top: 210px; } </style> </head> <body> <!-- 盒子移动 --> <div class="box box1"></div> <div class="box box2"></div> <script type="text/javascript"> var box1=box1=document.querySelector('.box1') var myInter=setInterval(function(){ var offsetLeft=box1.offsetLeft console.log(offsetLeft); var num=10; var target=100; if(offsetLeft==target){ clearInterval(myInter) }else{ box1.style.left=offsetLeft+num+'px' } },500)
QQ录屏20220707195737
二,缓动动画盒子(移动步长是不断变化的值)
-
思路
-
让盒子每次移动的距离慢慢变小,速度就会慢慢降下来
-
核心算法:(目标值-现在的位置)/10,作为每次移动的距离,步长
-
注意;通过算法,会有小数出现,如果盒子向右移动。我们一般采用向上取整(math.ceil),盒子向左移动,我们一般采用向下取整(floor)
-
停止的条件,让盒子当前的距离等于目标距离,就停止定时器。
-
代码实现
<style> *{margin: 0; padding: 0;} div{width: 200px; height: 200px; background-color: red; position:absolute;} </style> <body> <div> </div> <script> var Div=document.querySelector('div'); Div.addEventListener('click',function(){ var timer=setInterval(function(){ var num=Div.offsetLeft console.log(num); var target=500; var divnum=Math.ceil((target-num)/10); if(num==target){ clearInterval(timer) }else{ Div.style.left=num+divnum+'px'; } },30) }) </script> </body> </html>
注意,想给盒子设置移动就必须获得他的位置,必须给盒子添加定位!
-
盒子缓动动画