DOM Scripting中的圖片切換[兼容Firefox]

更新時(shí)間：2010年06月12日 23:08:29 作者：

dom scripting確實(shí)是一本對javascript dom編程很有指導(dǎo)意義的書，今天看了書中一個(gè)簡單的圖片切換實(shí)例，感覺很有意思。

學(xué)習(xí)過程中多分析別人的代碼實(shí)現(xiàn)是個(gè)好的習(xí)慣，哪怕不是很明白，跟著多敲幾遍代碼也是很培養(yǎng)感覺的事情。下面是實(shí)際的效果（一般我只在firefox中測試）：

鼠標(biāo)滑過上面的導(dǎo)航鏈接時(shí) 下面框中圖片進(jìn)行流暢的切換，左右移動的效果

html結(jié)構(gòu)如下：

復(fù)制代碼代碼如下:

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

實(shí)在是很簡單啊。下面我們直接來看js代碼，先給出兩個(gè)輔助函數(shù)：
addLoadEvent

復(fù)制代碼代碼如下:

 
function addLoadEvent(func) { 
var oldonload = window.onload; 
if(typeof window.onload != "function") { 
window.onload = func; 
} else { 
window.onload = function() { 
oldonload(); 
func(); 
} 
} 
} 

這個(gè)函數(shù)顧名思義就是加載window的onload事件所要處理的方法
insertAfter

復(fù)制代碼代碼如下:

 
function insertAfter(newElement, targetElement) { 
var parent = targetElement.parentNode; 
if(parent.lastChild == targetElement) { 
parent.appendChild(newElement); 
} else { 
parent.insertBefore(newElement, targetElement.nextSibling); 
} 
} 

在DOM API中有個(gè)insertBefore但是沒有insertAfter，所以這里自定義一個(gè)insertAfter方法，只要清楚appendChild和insertBefore這個(gè)函數(shù)很好理解，把newElement插入到targetElement之前。
接下來moveElement函數(shù)很核心：
moveElement

復(fù)制代碼代碼如下:

 
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值，所以被移動元素要設(shè)置position屬性（"relative"或是"position"）,這樣它的left，top屬性才會起作用，這個(gè)函數(shù)也不難，就是取得元素當(dāng)前的left和top值然后和final_x,final_y做比較，接著對其left和top按照一定的步長改變，每次的步長就是每個(gè)if中的dist變量，因?yàn)槊看蝑ist都會根據(jù)被移動元素的最新left，top計(jì)算，所以有一種先加速后減速的移動效果，參數(shù)interval，和setTimeout配合讓moveElement自我調(diào)用，直到元素移動到final_x和final_y.
接著是pepareSlideshow函數(shù)，動態(tài)的創(chuàng)建所需的dom元素：
prepareSlideshow

復(fù)制代碼代碼如下:

 
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中設(shè)置這些屬性，此處可省 
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中設(shè)置，此處可省 
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"); 
//給每個(gè)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); 
} 
} 

這里也就涉及到一些元素的創(chuàng)建，元素屬性的設(shè)置等基本的DOM API運(yùn)用，然后給ol[id="linklist"]中的a元素附加鼠標(biāo)moveover事件對應(yīng)的moveElement方法，最后用addLoadEvent（prepareSlideshow）就行了，結(jié)合html和效果圖看，這個(gè)函數(shù)也是很好理解的。
代碼打包下載 http://www.dbjr.com.cn/jiaoben/27501.html

您可能感興趣的文章: