JS编程艺术笔记(4)-动画基础-简单的文字漂移

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";
  //message开始执行漂移动作
  moveElement("message",125,25,20);
  
  if (!document.getElementById("message2")) return false;
  var elem = document.getElementById("message2");
  elem.style.position = "absolute";
  elem.style.left = "50px";
  elem.style.top = "50px";
  //message2开始执行漂移动作
  moveElement("message2",125,75,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+")";
  //setTime函数能让某个函数经过一段预定时间之后才开始执行
  //格式setTimeout(function,interval)
  movement = setTimeout(repeat,interval);
}

//把那些在页面加载完毕执行时，执行的函数创建为一个队列  
//例：addLoadEvent(firstFunction);addLoadEvent(secondFunction) 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

//页面加载的时候执行这个函数  
addLoadEvent(positionMessage);