javascript dom代碼應用:簡單的相簿

來源:互聯網
上載者:User

  最近一直對前端開發高度興趣,特別是在像jquery這種流行ajax類庫的協助下,即使沒有很好的javascript功底也能做出不錯的動態效果,確實是方便。但我覺得這還不行,畢竟什麼都是人家封裝好的,得自己深入學習下原生的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,很有意思...有遞迴的感覺,把事件函數像隊列一樣加了進去,然後順次執行。

 

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

    執行個體代碼下載

 

      

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.