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

原文链接:http://www.cnblogs.com/positive/p/3680204.html
<!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+")"

转载于:https://www.cnblogs.com/positive/p/3680204.html

展开阅读全文
博主设置当前文章不允许评论。

没有更多推荐了,返回首页