dom Scripting中的图片切换

　　dom scripting确实是一本对javascript dom编程很有指导意义的书，今天看了书中一个简单的图片切换实例，感觉很有意思。学习过程中多分析别人的代码实现是个好的习惯，哪怕不是很明白，跟着多敲几遍代码也是很培养感觉的事情。下面是实际的效果（一般我只在firefox中测试）：

鼠标滑过上面的导航链接时下面框中图片进行流畅的切换，左右移动的效果

html结构如下：

 1 <div>
 2     <h1>Web Design</h1>
 3     <p>These are the things you should know.</p>
 4     <ol id="linklist">
 5         <li>
 6             <a href="structure.html">Structure</a>
 7         </li>
 8         <li>
 9             <a href="presentation.html">Presentation</a>
10         </li>
11         <li>
12             <a href="behavior.html">Behavior</a>
13         </li>
14     </ol>
15 </div>

实在是很简单啊。下面我们直接来看js代码，先给出两个辅助函数：

 1     function addLoadEvent(func) {
 2         var oldonload = window.onload;
 3         
 4         if(typeof window.onload != "function") {
 5             window.onload = func;
 6         } else {
 7             window.onload = function() {
 8                 oldonload();
 9                 func();
10             }
11         }
12     }

这个函数顾名思义就是加载window的onload事件所要处理的方法

1     function insertAfter(newElement, targetElement) {
2         var parent = targetElement.parentNode;
3 
4         if(parent.lastChild == targetElement) {
5             parent.appendChild(newElement);
6         } else {
7             parent.insertBefore(newElement, targetElement.nextSibling);
8         }
9     }

在DOM API中有个insertBefore但是没有insertAfter，所以这里自定义一个insertAfter方法，只要清楚appendChild和insertBefore这个函数很好理解，把newElement插入到targetElement之前。

接下来moveElement函数很核心：

 1     function moveElement(elementID, final_x, final_y, interval) {
 2         if(!document.getElementById) return false;
 3 
 4         if(!document.getElementById(elementID)) return false;
 5         
 6         var elem = document.getElementById(elementID);
 7         
 8         if(elem.movement) {
 9             clearTimeout(elem.movement);
10         }
11         if(!elem.style.left) {
12             elem.style.left = "0px";
13         }
14         if(!elem.style.top) {
15             elem.style.top = "0px";
16         }
17         
18         var xpos = parseInt(elem.style.left);
19         var ypos = parseInt(elem.style.top);
20         
21         if(xpos == final_x && ypos == final_y) {
22             return true;
23         }
24         if(xpos < final_x) {
25             var dist = Math.ceil((final_x - xpos)/10);
26             xpos = xpos + dist;
27         }
28         if(xpos > final_x) {
29             var dist = Math.ceil((xpos - final_x)/10);
30             xpos = xpos - dist;
31         }
32         if(ypos < final_y) {
33             var dist = Math.ceil((final_y - ypos)/10);
34             ypos = ypos + dist;
35         }
36         if(ypos > final_y) {
37             var dist = Math.ceil((ypos - final_y)/10);
38             ypos = ypos - dist;
39         }
40         
41         elem.style.left = xpos + "px";
42         elem.style.top = ypos + "px";
43         
44         var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
45         
46         elem.movement = setTimeout(repeat, interval);
47     }

final_x, final_y 分别为元素移动终止的left和top值，所以被移动元素要设置position属性（"relative"或是"position"）,这样它的left，top属性才会起作用，这个函数也不难，就是取得元素当前的left和top值然后和final_x,final_y做比较，接着对其left和top按照一定的步长改变，每次的步长就是每个if中的dist变量，因为每次dist都会根据被移动元素的最新left，top计算，所以有一种先加速后减速的移动效果，参数interval，和setTimeout配合让moveElement自我调用，直到元素移动到final_x和final_y.

接着是pepareSlideshow函数，动态的创建所需的dom元素：

 1     function prepareSlideshow() {
 2         //确保浏览器能理解DOM API
 3         if(!document.getElementsByTagName) return false;
 4         if(!document.getElementById) return false;
 5         
 6         //确保该元素已存在
 7         if(!document.getElementById("linklist")) return false;
 8         
 9         var slideshow = document.createElement("div");
10         /*如果在css中设置这些属性，此处可省
11         slideshow.style.position = "relative";
12         slideshow.style.overflow = "hidden";
13         slideshow.style.width = "100px";
14         slideshow.style.height = "100px";
15         */
16         slideshow.setAttribute("id", "slideshow");
17         var preview = document.createElement("img");
18         
19         /*如果在css中设置，此处可省
20         preview.style.position = "absolute";
21         */
22         preview.setAttribute("src", "slideshow/topics.gif");
23         preview.setAttribute("alt", "building blocks of web design");
24         preview.setAttribute("id", "preview");
25         slideshow.appendChild(preview);
26         
27         var list = document.getElementById("linklist");
28         insertAfter(slideshow, list);
29         
30         //获得ol中所有的a元素
31         var links = list.getElementsByTagName("a");
32         
33         //给每个a的mouseover事件附加上moveElement方法
34         links[0].onmouseover = function() {
35             moveElement("preview",-100, 0, 10);
36         }
37         
38         links[1].onmouseover = function() {
39             moveElement("preview",-200, 0, 10);
40         }
41         
42         links[2].onmouseover = function() {
43             moveElement("preview",-300, 0, 10);
44         }
45     }

这里也就涉及到一些元素的创建，元素属性的设置等基本的DOM API运用，然后给ol[id="linklist"]中的a元素附加鼠标moveover事件对应的moveElement方法，最后用addLoadEvent（prepareSlideshow）就行了，结合html和效果图看，这个函数也是很好理解的。

完整实例下载（经过我css加工的） dom scripting原书实例下载 thanks for reading......