纯JS实现元素加速运动的函数封装

//elem:给哪个元素添加位移；direction:是垂直方向的话就传入top，水平方向left；speed控制速度，向下、向右传入正值，反之传入负值；distance表示位移的距离function elemDisplace(elem, direction,speed, distance){    //记录元素当前的位置    var origin = parseInt( getComputedStyle(elem, null)[direction] );    var pos;    var Timer = setInterval(function(){        pos = parseInt( getComputedStyle(elem, null)[direction] );        //判断元素是否位移到了指定的地方        if(Math.abs(pos - origin ) >= distance){            if(speed > 0){                elem.style[direction] = origin + distance + 'px';            }else {                elem.style[direction] = origin - distance + 'px';            }            speed = 0;            clearInterval(Timer);        }else {            //判断元素的位移方向            if(speed > 0) {                speed++;            } else {                speed--;            }            elem.style[direction] = pos + speed + 'px';        }        console.log(elem.style[direction] + ' , ' + origin);    },15);}

如果想让元素运动必须给元素添加除static之外的定位属性值使用中需要注意的地方是第二个属性值必须传"left"或者"top"中的一个

用法示例：　　在html中添加一个div元素

　　var oDiv = document.getElementsByTagName('div')[0];　　elemDisplace(oDiv, "top", 1, 400);　　或者elemDisplace(oDiv, "left", 1, 300);　　或者elemDisplace(oDiv, "top", -1, 200);　　...

这个方法还是有许多的运动类型，比如弹性运动，速度先快后慢的运动等等，如果你有兴趣可以自己设置运动类型

原创文章