當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript图片库

發布時間：2023/12/4 javascript 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript图片库小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

將圖片放到網上的方法有很多,你可以簡單地把所有的圖片都放到網頁上。但是，如果你打算發布的圖片過多,這個頁面很快會變的過于龐大,而且加上這些圖片后用戶要下載的的數據量就會變得相當可觀。我們必須面對這樣一個現實:沒有人會等待很長長時間去下載一個網頁;所以利用JavaScript來創建一個圖片庫將是最佳的選擇；

說下步驟:

第一步：把整個圖片庫的鏈接都加載到圖片庫的主頁里；

第二步：當用戶點擊對應的超鏈接時,攔截網頁的默認行為,即(超鏈接點擊跳轉行為);

第三步：當用戶點擊對應的超鏈接后,把"占位符"圖片替換成那個超鏈接所對應的圖片;

1、代碼如下:

第一版:

<body> <a href="img/index.jpg">圖片一</a><br /><a href="img/index.jpg" οnclick="showPic(this);return false;">圖片一</a><br /><a href="img/index1.jpg" οnclick="showPic(this);return false;">圖片二</a><br /><a href="img/index2.jpg" οnclick="showPic(this);return false;">圖片三</a><br /><a href="img/index4.jpg" οnclick="showPic(this);return false;">圖片四</a><p>----------------------------</p><img src="img/blank.png" alt="blank"/><script type="text/javascript">function showPic(whichpic) {var source = whichpic.getAttribute('href'); //獲取目標元素的src屬性;var placeholder = document.getElementsByTagName('img'); //獲取占位符圖片對象;placeholder.setAttribute('src', source); //圖片替換 }</script> </body> 代碼解析：οnclick="showPic(this);return false;" 這段代碼表示給<a></a>標簽添加了一個onclick事件處理函數,添加處理函數的語法如下所示:
event="JavaScript statement" JavaScript statement->方法體,this代表當前<a></a>標簽對象。
注意return false;表示阻止超鏈接跳轉的默認行為；
讓我們了解一下DOM1中的事件處理函數的工作機制。在給某個元素添加了事件處理函數后,一旦事件發生,相應的JavaScript代碼就會被執行。被調用的JavaScript就會返回一個值,這個值將被傳遞給那個事件處理函數。
若返回的值是true,onclick事件處理函數就認為這個函數被點擊了,若為false，就相反；所以加上return false，就可以防止用戶被帶到目標鏈接窗口;
注意：return false；只在DOM1中適用;所以這段代碼只會在支持DOM1標準的瀏覽器中才會有效,其他的瀏覽器任然會被帶到目標窗口！關于這個bug暫時先放一放！

2、由于return false；在一些瀏覽器上可能看不出效果,所以我這邊換了一種方式實現JS圖片庫；代碼如下:
第二版：
<body><a href="javascript:void(0);" title="img/index.jpg">圖片一</a><br /><a href="javascript:void(0);" title="img/index1.jpg">圖片二</a><br /><a href="javascript:void(0);" title="img/index2.jpg">圖片三</a><br /><a href="javascript:void(0);" title="img/index4.jpg">圖片四</a><p>----------------------------</p><img src="img/blank.png" alt="blank"/><script type="text/javascript">var a = document.getElementsByTagName('a');for (var i = 0; i < a.length; i++) {a[i].onclick = function () {showPic(this);}}function showPic(whichpic) {var source = whichpic.getAttribute('title'); //獲取目標元素的title屬性;var placeholder = document.getElementsByTagName('img')[0]; //獲取占位符圖片對象;placeholder.setAttribute('src', source); //圖片替換 }</script> </body>
3、在學完nodeValue屬性http://www.cnblogs.com/GreenLeaves/p/5695165.html#nodeValue后給JS圖片庫增加一個新的功能:點擊超鏈接把圖片的描述顯示到圖片的下面代碼如下：
第三版：
<body><a href="javascript:void(0);" title="img/index.jpg">圖片一</a><br /><a href="javascript:void(0);" title="img/index1.jpg">圖片二</a><br /><a href="javascript:void(0);" title="img/index2.jpg">圖片三</a><br /><a href="javascript:void(0);" title="img/index4.jpg">圖片四</a><p>----------------------------</p><img src="img/blank.png" alt="blank"/><br /><p id="description"></p><script type="text/javascript">var a = document.getElementsByTagName('a');for (var i = 0; i < a.length; i++) {a[i].onclick = function () {showPic(this);}}function showPic(whichpic) {var source = whichpic.getAttribute('title'); //獲取目標元素的title屬性;var placeholder = document.getElementsByTagName('img')[0]; //獲取占位符圖片對象;placeholder.setAttribute('src', source); //圖片替換var description = document.getElementById('description');description.childNodes[0].nodeValue = source;}</script> </body>

注意:當html代碼中<p id="description"></p>中沒有空格的時候這句代碼會報錯,description.childNodes[0].nodeValue = source;原因是此時的<p>標簽之間并沒有子節點,若在<p></p>標簽之間加一個空格,這個空格就會被解析成<p>標簽的子節點,即文本節點,這樣description.childNodes[0].nodeValue = source;不會報錯,功能完美實現;

4、在學習完JavaScript之最佳實踐后http://www.cnblogs.com/GreenLeaves/p/5701873.htm
再次對JS圖片庫進行升級,這次升級的主要目的是：

1、使圖片庫能夠平穩退化(即使Broswer禁用JavaScript網頁仍能正常訪問)

2、使圖片庫能向后兼容

3、分離JS代碼到單獨的JS文件

4、重構之前的JS代碼提高JS代碼的運行性能

5、合理的放置JS腳本

6、對象檢測:即使老版本瀏覽器不支持DOM方法,網頁仍能正常運行

7、關鍵元素的判斷,即使關鍵元素缺失,網頁仍能正常運行

第四版：

html代碼:

?在學習完JavaScript動態向文檔中添加元素和內容后http://www.cnblogs.com/GreenLeaves/p/5730898.html

再重新回到我們的圖片庫,我們發現在我們的htm文檔中有一個圖片和一段文字是專門為showPic腳本服務的,若能把結構和行為分離自然是最好的，既然這些元素的存在,是為了讓DOM方法來處理它們,那么用DOM方法來創建他們才是最合適的選擇。

第五版：

html代碼:

這個版本的圖片庫的結構和行為分離的已經很徹底了,但是還是有個問題,因為這里的圖片鏈接列表剛好是<body>部分的最后一個元素,如果在這個圖片列表之后還有其他的一些元素？我們該怎么做?我們最初的想法是想讓新創建的元素緊緊的跟在圖片清單的后面,而且不管清單出現在哪個位置。所以這個圖片庫的版本還有待改進!

在學了通過insertAfter()和insertBefore()向指定元素位置的地方加入元素之后http://www.cnblogs.com/GreenLeaves/p/5731614.html

我們結合之前所有的學習內容對JS圖片庫再做一次改進,代碼如下:

第六版：

utility.js? 公共庫

/* window.onload事件(當頁面加載完畢時需要調用的事件,也就是說當我們在開發中需要調用一些JS函數在頁面加載完畢后執行的可以和這個事件綁定) 但是這個事件只能綁定一個函數,如果再次綁定原先的事件會被覆蓋掉.所以這個方法就是將頁面加載完畢之后需要的函數創建一個隊列,然后將需要執行的函數一個個添加到隊列里面; @param func -需要添加到隊列里面的函數 */ function addOnloadEvent(func) {var oldonload = window.onload;if (typeof window.onload != "function") {window.onload = func; //如果window.onload事件沒有綁定任何function則正常綁定 }else {//如果window.onload事件已經綁定了函數,則在原來的基礎上,繼續添加新的函數window.onload = function () {oldonload();func();};} }/* addOnloadEvent的擴展版因為每次添加一個函數都需要調用addOnloadEvent()函數,所以為了節省代碼,將需要綁定的函數名寫入到一個數組里面, 然后將數組引用,傳遞給addOnloadEventlist();每次添加,只需將函數名,寫到數組里面即可 @param eventlist -需要與window.onload事件綁定的函數名數組 */ function addOnloadEventlist(eventlist) {if (!eventlist) return false;var oldonload = window.onload;window.onload = function () {for (var i = 0; i < eventlist.length; i++) {eventlist[i]();}}}/* 向目標元素之后添加新的元素 @param newElement=新元素 @param targetElement=目標元素 */ function insertAfter(newElement, targetElement) {/*編寫邏輯1、首先找到給出我們需要插入的元素和用來定位的目標元素2、根據目標元素找到兩個元素的父元素3、判斷目標元素是不是父元素內的唯一的元素.4、如果是,向父元素執行追加操作,就是appendChild(newElement)5、如果不是,向目標元素的之后的緊接著的節點之前執行inserBefore()操作*/var parentElement = targetElement.parentNode; //find parent elementif (parentElement.lastChild == targetElement)//To determime確定,下決心 whether the last element of the parent element is the same as the target element {parentElement.appendChild(newElement);} else {parentElement.insertBefore(newElement, targetElement.nextSibling);} }

index.js

html文件:

現在圖片庫真正的做到了,結構、樣式和行為徹底分離;

不過、這里還可以做下改進，將超鏈接的內容改成圖片的縮略圖、就是一個使用的圖片庫了。

總結

以上是生活随笔為你收集整理的JavaScript图片库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： linux red hat 安装svn
下一篇： activemq安全设置设置admin