DOM Scripting中的图片切换[兼容Firefox]

　　学习过程中多分析别人的代码实现是个好的习惯，哪怕不是很明白，跟着多敲几遍代码也是很培养感觉的事情。下面是实际的效果（一般我只在firefox中测试）：

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

　　html结构如下：

复制代码代码如下:

　　<body>

　　<h1>Web Design</h1>

　　<p>These are the things you should know.</p>

　　<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>

　　</body>

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

　　addLoadEvent

复制代码代码如下:

　　function addLoadEvent(func) {

　　var oldonload = window.onload;

　　if(typeof window.onload != "function") {

　　window.onload = func;

　　} else {

　　window.onload = function() {

　　oldonload();

　　func();

　　}

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

　　insertAfter

复制代码代码如下:

　　function insertAfter(newElement, targetElement) {

　　var parent = targetElement.parentNode;

　　if(parent.lastChild == targetElement) {

　　parent.appendChild(newElement);

　　} else {

　　parent.insertBefore(newElement, targetElement.nextSibling);

　　}

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

　　接下来moveElement函数很核心：

　　moveElement

复制代码代码如下:

　　function moveElement(elementID, final_x, final_y, interval) {

　　if(!document.getElementById) return false;

　　if(!document.getElementById(elementID)) return false;

　　var elem = document.getElementById(elementID);

　　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);

　　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 + ")";

　　elem.movement = setTimeout(repeat, interval);

　　}

　　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元素：

　　prepareSlideshow

复制代码代码如下:

　　function prepareSlideshow() {

　　//确保浏览器能理解DOM API

　　if(!document.getElementsByTagName) return false;

　　if(!document.getElementById) return false;

　　//确保该元素已存在

　　if(!document.getElementById("linklist")) return false;

　　var slideshow = document.createElement("div");

　　/*如果在css中设置这些属性，此处可省

　　slideshow.style.position = "relative";

　　slideshow.style.overflow = "hidden";

　　slideshow.style.width = "100px";

　　slideshow.style.height = "100px";

　　slideshow.setAttribute("id", "slideshow");

　　var preview = document.createElement("img");

　　/*如果在css中设置，此处可省

　　preview.style.position = "absolute";

　　preview.setAttribute("src", "slideshow/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);

　　//获得ol中所有的a元素

　　var links = list.getElementsByTagName("a");

　　//给每个a的mouseover事件附加上moveElement方法

　　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);

　　}

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

　　代码打包下载 http://www.glzy8.com/jiaoben/27501.html

教程首页更多教程