快捷導(dǎo)航

javascript dom代碼應(yīng)用簡單的相冊(cè)[firefox only]

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

最近一直對(duì)前端開發(fā)很感興趣，特別是在像jquery這種流行ajax類庫的幫助下，即使沒有很好的javascript功底也能做出不錯(cuò)的動(dòng)態(tài)效果，確實(shí)是方便。

但我覺得這還不行，畢竟什么都是人家封裝好的，得自己深入學(xué)習(xí)下原生的javascript才踏實(shí)。今天看到一篇不錯(cuò)的博文，介紹了一個(gè)基于js dom編程的相冊(cè)實(shí)例，雖然這個(gè)例子很小，但個(gè)人認(rèn)為還是很有學(xué)習(xí)價(jià)值的，先給出html和效果圖，這樣有助于后面js的理解。

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

 
<body> 
<div id="content"> 
<h1>Snapshots</h1> 
<ul id="imagegallery"> 
<li> 
<a href="photo/fireworks.jpg" title="A fireworks display"> 
<img src="photo/thumbnail_fireworks.jpg" alt="Fireworks" /> 
</a> 
</li> 
<li> 
<a href="photo/coffee.jpg" title="A cup of black coffee"> 
<img src="photo/thumbnail_coffee.jpg" alt="Coffee" /> 
</a> 
</li> 
<li> 
<a href="photo/rose.jpg" title="A red, red rose"> 
<img src="photo/thumbnail_rose.jpg" alt="Rose" /> 
</a> 
</li> 
<li> 
<a href="photo/bigben.jpg" title="The famous clock"> 
<img src="photo/thumbnail_bigben.jpg" alt="Big Ben" /> 
</a> 
</li> 
</ul> 
</div> 
</body> 

結(jié)構(gòu)還是挺簡單的，這里a元素的href屬性值為要顯示大圖的路徑，img為對(duì)應(yīng)的小圖。效果就是點(diǎn)擊下面的小圖，上面顯示對(duì)應(yīng)的大圖。
下面給出js實(shí)現(xiàn)：

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

 
<script type="text/javascript"> 
/*3相冊(cè)代碼的關(guān)鍵函數(shù)，傳入?yún)?shù)為a元素*/ 
function showPic(whichpic) { 
if(!document.getElementById("placeholder")) return true; 
/*取得a元素的href*/ 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
/*顯示圖片:讓img元素的src變?yōu)閍元素的href*/ 
placeholder.setAttribute("src",source); 
if(!document.getElementById("description")) return false; 
/*取得a元素的title*/ 
if(whichpic.getAttribute("title")) { 
var text = whichpic.getAttribute("title"); 
} else { 
var text = ""; 
} 
/*將a元素的title賦給描述文字*/ 
var description = document.getElementById("description"); 
if(description.firstChild.nodeType == 3) { 
description.firstChild.nodeValue = text; 
} 
return false; 
} 
/*2給所有的imagegallery的a添加上click事件響應(yīng)函數(shù)*/ 
function prepareGallery() { 
if(!document.getElementsByTagName) return false; 
if(!document.getElementById) return false; 
if(!document.getElementById("imagegallery")) return false; 
var gallery = document.getElementById("imagegallery"); 
var links = gallery.getElementsByTagName("a"); 
for(var i=0; i < links.length; i++) { 
links[i].onclick = function() { 
return showPic(this); 
} 
links[i].onkeypress = links[i].onclick; 
} 
} 
/*添加load事件響應(yīng)函數(shù)的函數(shù)*/ 
function addLoadEvent(func) { 
var oldonload = window.onload; 
if(typeof window.onload != 'function') { 
window.onload = func; 
} else { 
window.onload = function() { 
oldonload(); 
func(); 
} 
} 
} 
/* 1.代碼開始*/ 
function preparePlaceholder() { 
if(!document.createElement) return false; 
if(!document.createTextNode) return false; 
/*創(chuàng)造一個(gè)img元素,設(shè)置它的屬性*/ 
var placeholder = document.createElement("img"); 
placeholder.setAttribute("id", "placeholder"); 
placeholder.setAttribute("src", "photo/placeholder.gif"); 
placeholder.setAttribute("alt", "my image gallery"); 
/*創(chuàng)建一個(gè)段落,作為描述*/ 
var description = document.createElement("p"); 
description.setAttribute("id","description"); 
var desctext = document.createTextNode("choose an image"); 
description.appendChild(desctext); 
/*imagegallery是文檔里的ul*/ 
var gallery = document.getElementById("imagegallery"); 
/*將大圖和描述文字插入文檔*/ 
gallery.parentNode.insertBefore(placeholder, gallery); 
gallery.parentNode.insertBefore(description, gallery); 
} 
/*為事件初始化*/ 
addLoadEvent(preparePlaceholder); 
addLoadEvent(prepareGallery); 
</script> 

我們先看preparePlaceholder函數(shù)，在這個(gè)函數(shù)里創(chuàng)建了一個(gè)img元素placeholder，并設(shè)置了它對(duì)應(yīng)的屬性(id, src, alt)，又創(chuàng)建了一個(gè)p元素description，p元素中用appendChild方法插入了一個(gè)文本節(jié)點(diǎn)用于給出照片的描述，初始為“choose an image”，然后通過document.getElementById找到ul，并把生成的img和p插到圖片列表之前。說明下insertBefore的用法，查了下Mozilla developer center:

　　　　　　var insertedElement = parentElement.insertBefore(newElement, referenceElement);

　　　　　　insertedElement 其實(shí)就是newElement，作為一個(gè)返回結(jié)果

　　　　　　parentElement 是要插入的父級(jí)元素即插入哪個(gè)元素中

　　　　　　newElement 當(dāng)然就是那個(gè)要插入的新元素啦

　　　　　　referenceElement 指要在哪個(gè)元素之前插入

我們接著看prepareGallery函數(shù)，它的作用是為每個(gè)a元素賦予一個(gè)單擊事件，其中return showPic(this)默認(rèn)返回的是false，是為了阻止點(diǎn)擊a元素后的默認(rèn)行為（直接到新頁面顯示圖片）

下面是最核心的showPic函數(shù)，通過取得包裹對(duì)應(yīng)小圖片的a元素中的href 和 title屬性值（href的值為小圖片對(duì)應(yīng)的大圖片的路徑），來為preparePlaceholder函數(shù)中生成的img設(shè)置src屬性，和p中的描述文本，形成最終的效果。這里面有個(gè)nodeType，具體也可在Mozilla developer center中查到。

最后還有一個(gè)很有意思的函數(shù)就是addLoadEvent，很有意思...有遞歸的感覺，把事件函數(shù)像隊(duì)列一樣加了進(jìn)去，然后順次執(zhí)行。

呵呵，這個(gè)相冊(cè)就分析到這，這是我第一次發(fā)表博文，有什么不對(duì)或需要提高的地方，希望博友們多多指點(diǎn)，我會(huì)虛心接受的，謝謝。
代碼打包下載

您可能感興趣的文章: