js运动特效 小白入门

1.匀速运动：思想有一个div设置了absolute left为0(当然也可以是其他的) 通过定时器周期性加速

var time = null, speed = 10, var div = document.getElementById("sped)

time = setInterval(function(){

      div.style.left = div.offsetLeft+speed+"px"

},speed)

2.侧边栏导航 思想：有一个div 设置了position为absolute  left ：-300px  然后鼠标移入然left =0 鼠标移出left归0

var cbl = document.getElementById("cbl");

var time = null;

cbl.onmouseover = function (e) {

AddLinerCross(this,0)

}

cbl.onmouseout = function (e) {

AddLinerCross(this,-200)

}

function AddLinerCross(obj,end){

clearInterval(time);

var speed = end >=0 ? 5:-5

time = setInterval(function (e) {

if(obj.offsetLeft === end){

clearInterval(time);

return;

}

obj.style.left = obj.offsetLeft + speed + "px";

},30)

}

3.变速导航 思想 v=s/t t是自己设置 但是得到结果永远是小数 (因为0-n/m得到是一个不定数 0-50/30=1.666666667)因此需要取整 不取整 会导致f反复得到一个值然后这个值付给offsetleft 然后进行循环导致  定时器无法取消掉 和left永远无法到指定的值

var speed = （终点 - 起点(每次都会发生变化)）/time；

var timer = null,end=0,end2=-300;

box.onmouseover = function () {

clearInterval(timer)

timer= setInterval(function (e) {

var speed =Math.ceil( 0 - box.offsetLeft/5);

console.log(speed,box.offsetLeft,end)

if(speed ===end){

clearInterval(timer);

return;

}

box.style.left = box.offsetLeft+speed+"px"

},20)

}