<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>position</title> </head> <body> <p id='message'>Whee!</p> <script> addLoadEvent(positionMessage); addLoadEvent(moveMessage); function positionMessage(){ var elem = document.getElementById('message'); elem.style.position = 'absolute'; elem.style.left = '50px'; elem.style.top = '100px'; } function moveMessage(){ var elem = document.getElementById('message'); elem.style.left = '200px'; } </script> </body> </html>
如果让moveMessage()函数在页面加载时运行，这个元素的位置将立刻发生变化----由positionMessage函数给出的原始位置会被立刻覆盖
导致元素的显示位置立刻发生变化的根源是Javascript太有效率了：函数一个接一个地执行,其间根本没有我们所能察觉的间隔。
二、创造时间间隔
setTimeout("function",interval);
setTimeout有两个参数，第一个参数通常是一个字符串，其内容是将要执行的那个函数的名字; 第二个参数是一个表示时间间隔的数值
在绝大多数时候，把这个函数调用赋值给一个变量将是一个好主意：variable=setTimeout('function',interval);
如果想取消某个正在排队等待执行的函数，就必须事先像上面这样把setTimeout函数的返回值赋给一个变量。
取消队列 clearTimeout(variable); ....需要一个参数---保存着某个setTimeout函数调用返回值的变量。
修改positionMessage函数，让它在5秒之后才去调用moveMessage函数：
<script> addLoadEvent(positionMessage); function positionMessage(){ var elem = document.getElementById('message'); elem.style.position = 'absolute'; elem.style.left = '50px'; elem.style.top = '100px'; moveMent = setTimeout('moveMessage()',5000);//相隔5秒执行moveMessage函数.....在5秒钟的时间里，随时可以clearTimeout(movement)取消这一跳跃行为...... } function moveMessage(){ var elem = document.getElementById('message'); elem.style.left = '200px'; } </script>
解析：movement变量对应着在positionMessage函数里定义的setTimeout调用。它是一个全局变量，这意味着那个“跳跃”行为可以在positionMessage函数以外的地方被取消。
三、真正的动画效果是一个渐变的过程
<script> addLoadEvent(positionMessage); function positionMessage(){
if(!document.getElementById)return false;
if(!document.getElementById('message')) return false; var elem = document.getElementById('message'); elem.style.position = 'absolute'; elem.style.left = '50px'; elem.style.top = '100px'; movement = setTimeout('moveMessage()',10); } function moveMessage(){ var elem = document.getElementById('message'); var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if(xpos == 200 && ypos ==100){ return true; } if(xpos < 200){ xpos++; } if(xpos > 200){ xpos--; } if(ypos > 100){ ypos++; } if(ypos < 100){ ypos--; } elem.style.left = xpos +'px'; elem.style.top = ypos +'px'; movement=setTimeout('moveMessage()',10); } function addLoadEvent(func){ var oldEvent = window.onload; if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldEvent(); func(); } } } </script>
moveMess()函数使得message元素以每次1像素的方式在浏览器窗口里移动。一旦这个元素的top和left属性同时等于100px和200px,这个函数就停止执行。
四、抽象
<script> addLoadEvent(positionMessage); function positionMessage(){ var elem = document.getElementById('message'); elem.style.position = 'absolute'; elem.style.left = '50px'; elem.style.top = '100px'; moveMessage('message',125,25,20); } function moveElement(elementId,final_x,final_y,interval){ if( !document.getElementById) return false; if( !document.getElementById(elementId)) return false; var elem = document.getElementById(elementId); var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if(xpos == final_x && ypos == final_y){ return true; } if(xpos < final_x){ xpos++; } if(xpos > final_x){ xpos--; } if(ypos > final_y){ ypos++; } if(ypos < final_y){ ypos--; } elem.style.left = xpos +'px'; elem.style.top = ypos +'px'; var repeat="moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")"; movement=setTimeout(repeat,10); } </script>
"moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")"