DOM Scripting代码：动画切图

DOM Scripting一书中的动画切图代码，当鼠标经过链接的时候，显示相应的示例图片，点击进入动画切图实际效果页面。

本书的完整代码可以在出版社的网站上下载。下面是动画切图的部分关键代码和注释：

实例JavaScript代码

function prepareSlideshow() {
// 确认浏览器能够理解DOM函数
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
// 确认需要的元素都存在
  if (!document.getElementById("linklist")) return false;
//创建div，创建img，将img添加到div里
  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);
  var list = document.getElementById("linklist");
  insertAfter(slideshow,list);
// 取得list里的所有链接
  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(prepareSlideshow);

HTML代码

<h1>Web Design</h1>
<p>These are the things you should know.</p>
<ol id="linklist">
<li>
  <a href="structure.html">Structure</a>
</li>
<li>
  <a href="presentation.html">Presentation</a>
</li>
<li>
  <a href="behavior.html">Behavior</a>
</li>
</ol>
  1. 用javascript修改html元素的class
  2. JavaScript重定向
  3. JavaScript对象当作关联数组
  4. JavaScript弹出窗口以及窗口间的通信
  5. JavaScript显示信息实例
  6. 用JavaScript批量访问HTML元素
  7. 分离JavaScript与HTML
  8. JavaScript计算器实例
  9. JavaScript的Math对象计算器
  10. JavaScript改变HTML元素的位置
  11. JavaScript动画
  12. JavaScript动画函数
  13. JavaScript拖拽
  14. JavaScript拖拽2——多元素、分离JS
  15. JavaScript拖拽3——解决快速拖拽的问题
  16. addEventSimple函数，添加事件响应函数的方法
  17. addEventSimple观察鼠标事件
  18. JavaScript click事件深入
  19. JavaScript事件来源元素
  20. JavaScript修改与访问CSS
  21. JavaScript拖拽4——获得元素的位置
  22. JavaScript拖拽5——性能优化
  23. DOM Scripting相册
  24. DOM Scripting斑马表格
  25. DOM Scripting动画切图
  26. JavaScript颜色渐变
  27. JavaScript拖拽6——修复错误