JS编程艺术笔记(5)-动画进阶-文字图片轮播

function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  
  //这一段很重要：
  //1、若没有清除setTimeout队列里的事件。
  //       当用户移动指针悬浮在某个链接上时，不管上一次的调用是否已经把图片移动到位，
  //   moveElement函数都会被再次调用并试图把这个图片移动到另一个地方去,moveElement就会同时向两边移动
  
  //2、测试element元素的特定属性是否存在
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
 
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  
  //每次移动10分之一的距离
  //Math.ceil(number):把浮点数向“大于”方向舍入与之最接近的整数
  //Math.floor(number):把浮点数向“小于”方向舍入与之最接近的整数
  //Math.round(number):把浮点数舍入与之最接近的整数
  if (xpos == final_x && ypos == final_y) {
    return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  
  //创建并设置element元素的属性，这样就可以在前面测试element元素的特定属性是否存在
  elem.movement = setTimeout(repeat,interval);
}

//自编写的insertAfter函数：在现有元素后插入一个新元素  
function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

function prepareSlideshow() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("linklist")) return false;
  
  //创建动态图片展示区
  var slideshow = document.createElement("div");
  slideshow.setAttribute("id","slideshow");
  var preview = document.createElement("img");
  preview.setAttribute("src","topics.gif");
  preview.setAttribute("alt","building blocks of web design");
  preview.setAttribute("id","preview");
  slideshow.appendChild(preview);
  
  //在前端的linklist元素后面，动态添加slideshow
  var list = document.getElementById("linklist");
  insertAfter(slideshow,list);
  
  //分别添加onmouseover事件
  var links = list.getElementsByTagName("a");
  links[0].onmouseover = function() {
    moveElement("preview",-100,0,10);
  }
  links[1].onmouseover = function() {
    moveElement("preview",-200,0,10);
  }
  links[2].onmouseover = function() {
    moveElement("preview",-300,0,10);
  }
}

//把那些在页面加载完毕执行时，执行的函数创建为一个队列    
//例：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(prepareSlideshow);