javascript dom代碼應用簡單的相簿[firefox only]

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

但我覺得這還不行，畢竟什麼都是人家封裝好的，得自己深入學習下原生的javascript才踏實。今天看到一篇不錯的博文，介紹了一個基於js dom編程的相簿執行個體，雖然這個例子很小，但個人認為還是很有學習價值的，先給出html和，這樣有助於後面js的理解。
複製代碼代碼如下:<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>

結構還是挺簡單的，這裡a元素的href屬性值為要顯示大圖的路徑，img為對應的小圖。效果就是點擊下面的小圖，上面顯示對應的大圖。
下面給出js實現：複製代碼代碼如下:<script type="text/javascript">
/*3相簿代碼的關鍵函數，傳入參數為a元素*/
function showPic(whichpic) {
if(!document.getElementById("placeholder")) return true;
/*取得a元素的href*/
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
/*顯示圖片:讓img元素的src變為a元素的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事件響應函數*/
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事件響應函數的函數*/
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;
/*創造一個img元素,設定它的屬性*/
var placeholder = document.createElement("img");
placeholder.setAttribute("id", "placeholder");
placeholder.setAttribute("src", "photo/placeholder.gif");
placeholder.setAttribute("alt", "my image gallery");
/*建立一個段落,作為描述*/
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函數，在這個函數裡建立了一個img元素placeholder，並設定了它對應的屬性(id, src, alt)，又建立了一個p元素description，p元素中用appendChild方法插入了一個文本節點用於給出照片的描述，初始為“choose an image”，然後通過document.getElementById找到ul，並把產生的img和p插到圖片列表之前。說明下insertBefore的用法，查了下Mozilla developer center:

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

　　　　　　insertedElement 其實就是newElement，作為一個返回結果

　　　　　　parentElement 是要插入的父級元素即插入哪個元素中

　　　　　　newElement 當然就是那個要插入的新元素啦

　　　　　　referenceElement 指要在哪個元素之前插入

我們接著看prepareGallery函數，它的作用是為每個a元素賦予一個單擊事件，其中return showPic(this)預設返回的是false，是為了阻止點擊a元素後的預設行為（直接到新頁面顯示圖片）

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

最後還有一個很有意思的函數就是addLoadEvent，很有意思...有遞迴的感覺，把事件函數像隊列一樣加了進去，然後順次執行。

呵呵，這個相簿就分析到這，這是我第一次發表博文，有什麼不對或需要提高的地方，希望博友們多多指點，我會虛心接受的，謝謝。
代碼打包下載

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More