利用javascript实现简单动画效果。

  利用javascript的setTimeout()函数可以实现简单的动画效果。setTimeout()函数有两个参数，第一个参数是一个字符串，其内容是将要执行的哪个函数的名字；第二个参数是一个数值，它以毫秒为单位设定了需要经过多长时间才开始执行第一个参数所给出的函数。

setTimeout("function",interval)

实例：

//html
<div id="message" style="width: 20px;height: 20px;background-color: green;"></div>

创建一个移动的元素

//js
function positionMessage() {
var elem = document.getElementById('message');
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "50px";
movement = setTimeout("moveMessage()",1000);//一秒钟之后开始移动元素
}
function moveMessage(){
var elem = document.getElementById("message");
var xpos = parseInt(elem.style.left);//parseInt()函数提取字符串中的整数，此处elem.style.left的值实际上是一个字符串“50px”
var ypos = parseInt(elem.style.top);
if(xpos == 200&&ypos == 100){
return true;
}
if(xpos>200){
xpos--;//每次移动一个像素
}
if (xpos<200) {
xpos++;
}
if (ypos>200) {
ypos--;
}
if (ypos<200) {
ypos++;
}
elem.style.left = xpos + "px";//再次转换为字符串
elem.style.top = ypos + "px";
movement = setTimeout("moveMessage()",10);
}
positionMessage();

之前：



一秒后：