【DOM编程艺术】positionMessage函数和moveMessage函数

<!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+")"