JavaScript匀速运动

自注册账号以来,一直没有留下过什么东西,最近了解了JS中的元素运动,希望在这里记录分享一下.首先说一下思路吧. 1.首先我们页面内需要有一个元素,为这个元素设置一定的宽高、背景色以及绝对定位.

<div style = "height:100px; width:100px; background:#f40; position:absolute; left:0; top: 100;"></div>

2.为元素添加事件,当事件发生时,控制元素的绝对定位坐标. 1)先找到该元素,我这里使用TagName;

var ele = document.getelementsByTagName('div')[0];

2)这里有一个匀速运动的思想,如何才能让元素移动呢?那就是让元素的绝对定位坐标一定的像素增加.那么如果匀速运动呢?这里就需要调用定时器来实现.

var timer = null; function eleMove( obj, target ){ clearInterval( timer ); timer = setInterval( () => { var speed = target - obj.offsetLeft > 0 ? 2 : -2; if( target == obj.offsetLeft ){ clearInterval( timer ); }else{ obj.style.left = obj.offsetLeft + speed + 'px'; } },30) }

这里解释一下这段代码.首先我们在全局定义了一个空的变量,这是为定时器准备的.obj是需要操作的元素,target是元素的移动参数,speed处使用一个三目判断元素需要向左运动还是向右运动.如下图所示,如果(target - obj.offsetLeft)是一个正值,证明元素在目标参数左边,需要向右运动;如果是一个负值,证明元素在参数右边,需要向左边移动.

‘’’ if语句是为了判断元素的定位坐标是否与目标一致,如果一直,就停止计时器,如果不一致,元素继续移动. 我在函数的最顶部添加了一个清除定时器的命令,因为我们在实际操作中会发现当我们多次出发事件时,元素移动会越来越快,这是因为我们重复触发事件,导致函数被重复调用.利用清除定时器命令可以清除上次触发事件的定时器,这样就不会有上述问题出现了.

obj.onclick = function(){ eleMove( obj, target ); }

可以使用上面代码调用这个函数. 第一次在这里写博客,如有不足之处,还望指出,我会加以修正.