js 里的动画小例子

1. 使用定时器，让元素移动

    用JS让元素运用

   移除点击事件。

实例：

var box = document.getElementById('box');

var boxLeft = 0;

box.onclick = function(){

box.onclick = null;// 移除点击事件。

var moveTimer = setInterval(function(){// 使用定时器，让元素移动

boxLeft += 3;

box.style.left = boxLeft + "px";// 用JS让元素运用

// boxLeft大于600的时候，清除定时器。

if (boxLeft >= 600) {

clearInterval(moveTimer);

}

}, 20);

}

---

2.由上面的例子。我们可以引申下面的碰壁反弹：

var con = document.getElementById('con');

var conLeft = 0;

var conTop = 0;

var jiaTop = 12.5;

var jiaLeft = 5.0;

setInterval(function(){

if(conLeft >= 450 ){

jiaLeft = -5.0;

}else if(conLeft <= 0){

jiaLeft = 5.0;

}

if(conTop >= 250){

jiaTop = -12.5;

}else if(conTop <= 0){

jiaTop = 12.5;

}

conLeft += jiaLeft;

conTop += jiaTop;

con.style.top = conTop + "px";

con.style.left = conLeft + "px";

},100)