當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript图片库
生活随笔
收集整理的這篇文章主要介紹了
JavaScript图片库
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
將圖片放到網(wǎng)上的方法有很多,你可以簡單地把所有的圖片都放到網(wǎng)頁上。但是，如果你打算發(fā)布的圖片過多,這個(gè)頁面很快會(huì)變的過于龐大,而且加上這些圖片后用戶要下載的的數(shù)據(jù)量就會(huì)變得相當(dāng)可觀。我們必須面對(duì)這樣一個(gè)現(xiàn)實(shí):沒有人會(huì)等待很長長時(shí)間去下載一個(gè)網(wǎng)頁;所以利用JavaScript來創(chuàng)建一個(gè)圖片庫將是最佳的選擇；
說下步驟:
第一步：把整個(gè)圖片庫的鏈接都加載到圖片庫的主頁里；
第二步：當(dāng)用戶點(diǎn)擊對(duì)應(yīng)的超鏈接時(shí),攔截網(wǎng)頁的默認(rèn)行為,即(超鏈接點(diǎn)擊跳轉(zhuǎn)行為);
第三步：當(dāng)用戶點(diǎn)擊對(duì)應(yīng)的超鏈接后,把"占位符"圖片替換成那個(gè)超鏈接所對(duì)應(yīng)的圖片;
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'); //獲取目標(biāo)元素的src屬性;var placeholder = document.getElementsByTagName('img'); //獲取占位符圖片對(duì)象;placeholder.setAttribute('src', source); //圖片替換 }</script> </body> 代碼解析：οnclick="showPic(this);return false;" 這段代碼表示給<a></a>標(biāo)簽添加了一個(gè)onclick事件處理函數(shù),添加處理函數(shù)的語法如下所示:event="JavaScript statement" JavaScript statement->方法體,this代表當(dāng)前<a></a>標(biāo)簽對(duì)象。
注意return false;表示阻止超鏈接跳轉(zhuǎn)的默認(rèn)行為；
讓我們了解一下DOM1中的事件處理函數(shù)的工作機(jī)制。在給某個(gè)元素添加了事件處理函數(shù)后,一旦事件發(fā)生,相應(yīng)的JavaScript代碼就會(huì)被執(zhí)行。被調(diào)用的JavaScript就會(huì)返回一個(gè)值,這個(gè)值將被傳遞給那個(gè)事件處理函數(shù)。
若返回的值是true,onclick事件處理函數(shù)就認(rèn)為這個(gè)函數(shù)被點(diǎn)擊了,若為false，就相反；所以加上return false，就可以防止用戶被帶到目標(biāo)鏈接窗口;
注意：return false；只在DOM1中適用;所以這段代碼只會(huì)在支持DOM1標(biāo)準(zhǔn)的瀏覽器中才會(huì)有效,其他的瀏覽器任然會(huì)被帶到目標(biāo)窗口！關(guān)于這個(gè)bug暫時(shí)先放一放！
2、由于return false；在一些瀏覽器上可能看不出效果,所以我這邊換了一種方式實(shí)現(xiàn)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'); //獲取目標(biāo)元素的title屬性;var placeholder = document.getElementsByTagName('img')[0]; //獲取占位符圖片對(duì)象;placeholder.setAttribute('src', source); //圖片替換 }</script> </body>
3、在學(xué)完nodeValue屬性http://www.cnblogs.com/GreenLeaves/p/5695165.html#nodeValue后給JS圖片庫增加一個(gè)新的功能:點(diǎn)擊超鏈接把圖片的描述顯示到圖片的下面代碼如下：
第三版：
<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'); //獲取目標(biāo)元素的title屬性;var placeholder = document.getElementsByTagName('img')[0]; //獲取占位符圖片對(duì)象;placeholder.setAttribute('src', source); //圖片替換var description = document.getElementById('description');description.childNodes[0].nodeValue = source;}</script> </body>
注意:當(dāng)html代碼中<p id="description"></p>中沒有空格的時(shí)候 這句代碼會(huì)報(bào)錯(cuò),description.childNodes[0].nodeValue = source;原因是此時(shí)的<p>標(biāo)簽之間并沒有子節(jié)點(diǎn),若在<p></p>標(biāo)簽之間加一個(gè)空格,這個(gè)空格就會(huì)被解析成<p>標(biāo)簽的子節(jié)點(diǎn),即文本節(jié)點(diǎn),這樣description.childNodes[0].nodeValue = source;不會(huì)報(bào)錯(cuò),功能完美實(shí)現(xiàn);
4、在學(xué)習(xí)完JavaScript之最佳實(shí)踐后http://www.cnblogs.com/GreenLeaves/p/5701873.htm
再次對(duì)JS圖片庫進(jìn)行升級(jí),這次升級(jí)的主要目的是：
1、使圖片庫能夠平穩(wěn)退化(即使Broswer禁用JavaScript網(wǎng)頁仍能正常訪問)
2、使圖片庫能向后兼容
3、分離JS代碼到單獨(dú)的JS文件
4、重構(gòu)之前的JS代碼提高JS代碼的運(yùn)行性能
5、合理的放置JS腳本
6、對(duì)象檢測:即使老版本瀏覽器不支持DOM方法,網(wǎng)頁仍能正常運(yùn)行
7、關(guān)鍵元素的判斷,即使關(guān)鍵元素缺失,網(wǎng)頁仍能正常運(yùn)行
第四版：
window.onload = prepareGallery; function prepareGallery() {if (!document.getElementById) return false;if (!document.getElementsByTagName) return false;//判斷瀏覽器是否支持DOM方法防止瀏覽器不支持網(wǎng)頁出現(xiàn)運(yùn)行錯(cuò)誤//判斷id為imagegallery的元素是否存在,如果不存在的話網(wǎng)頁任能正常運(yùn)行if (document.getElementById("imagegallery")) {var gallery = document.getElementById("imagegallery");var links = gallery.getElementsByTagName("a"); //這里不加判斷是因?yàn)槿绻氵B圖片都沒有,何談功能。for (var i = 0; i < links.length; i++) {links[i].onclick = function () {//showPic(this);//return false; 假設(shè)showPic方法沒有出現(xiàn)問題,return false是正確的做法,但是萬一shwPic出現(xiàn)了問題,這個(gè)時(shí)候返回false,點(diǎn)擊超鏈接將沒有任何反應(yīng),//所以這個(gè)地方這樣該更好return !showPic(this); //如果showPic方法出現(xiàn)問題,超鏈接任然有效符合JavaSciprt平穩(wěn)退化的要求; }}} } function showPic(whichpic) {if (!document.getElementsByTagName("img")[0]) return false;var source=whichpic.getAttribute("href");//獲取圖片的鏈接地址var placeholder = document.getElementsByTagName("img")[0];if (placeholder.nodeName != "IMG") return false;placeholder.setAttribute("src", source);if (!document.getElementById("description")) return false;var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //獲取圖片名稱(判斷圖片超鏈接的文本節(jié)點(diǎn)(圖片名稱)是否存在)var description = document.getElementById("description");description.firstChild.nodeValue = text;return true; }?
html代碼:
<body><div id="imagegallery"><a href="img/index.jpg" title="dog_one">圖片一</a><br /><a href="img/index1.jpg" title="dog_two">圖片二</a><br /><a href="img/index2.jpg" title="dog_three">圖片三</a><br /><a href="img/index4.jpg" title="dog_four">圖片四</a><p>----------------------------</p><img src="img/blank.png" alt="blank" /><br /><p id="description"></p></div><script src="picLibrary.js" type="text/javascript"></script> <!--合理放置了JS腳本在加載完DOM后在加載JS腳本,提高了頁面的加載速度,提現(xiàn)了內(nèi)容優(yōu)先的原則--> </body>?
?在學(xué)習(xí)完JavaScript動(dòng)態(tài)向文檔中添加元素和內(nèi)容后http://www.cnblogs.com/GreenLeaves/p/5730898.html
再重新回到我們的圖片庫,我們發(fā)現(xiàn)在我們的htm文檔中有一個(gè)圖片和一段文字是專門為showPic腳本服務(wù)的,若能把結(jié)構(gòu)和行為分離自然是最好的，既然這些元素的存在,是為了讓DOM方法來處理它們,那么用DOM方法來創(chuàng)建他們才是最合適的選擇。
第五版：
window.onload = prepareGallery; function prepareGallery() {if (!document.getElementById) return false;if (!document.createElement) return false;
if (!document.createTextNode) return false;if (!document.getElementsByTagName) return false;//判斷瀏覽器是否支持DOM方法防止瀏覽器不支持網(wǎng)頁出現(xiàn)運(yùn)行錯(cuò)誤//判斷id為imagegallery的元素是否存在,如果不存在的話網(wǎng)頁任能正常運(yùn)行if (document.getElementById("imagegallery")) {var gallery = document.getElementById("imagegallery");var placeholder = document.createElement("img"); //創(chuàng)建一個(gè)圖片展示容器placeholder.setAttribute("id", "placeholder");placeholder.setAttribute("src", "../img/blank.jpg");var description = document.createElement("p"); //創(chuàng)建描述description.setAttribute("id", "description");var desctxt = document.createTextNode("chose an image");description.appendChild(desctxt);var body = document.getElementsByTagName("body")[0];body.appendChild(placeholder);body.appendChild(description);var links = gallery.getElementsByTagName("a"); //這里不加判斷是因?yàn)槿绻氵B圖片都沒有,何談功能。for (var i = 0; i < links.length; i++) {links[i].onclick = function () {//showPic(this);//return false; 假設(shè)showPic方法沒有出現(xiàn)問題,return false是正確的做法,但是萬一shwPic出現(xiàn)了問題,這個(gè)時(shí)候返回false,點(diǎn)擊超鏈接將沒有任何反應(yīng),//所以這個(gè)地方這樣該更好return !showPic(this); //如果showPic方法出現(xiàn)問題,超鏈接任然有效符合JavaSciprt平穩(wěn)退化的要求; }}} } function showPic(whichpic) {var source = whichpic.getAttribute("href");//獲取圖片的鏈接地址placeholder.setAttribute("src", source);var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //獲取圖片名稱(判斷圖片超鏈接的文本節(jié)點(diǎn)(圖片名稱)是否存在)document.getElementById("description").firstChild.nodeValue = text;return true; }
html代碼:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> </head> <body><div id="imagegallery"><a href="../img/index.jpg" title="dog_one">圖片一</a><br /><a href="../img/index1.jpg" title="dog_two">圖片二</a><br /><a href="../img/index2.jpg" title="dog_three">圖片三</a><br /><a href="../img/index4.jpg" title="dog_four">圖片四</a></div><script src="jsPic.js"></script> <!--合理放置了JS腳本在加載完DOM后在加載JS腳本,提高了頁面的加載速度,提現(xiàn)了內(nèi)容優(yōu)先的原則--> </body> </html>
這個(gè)版本的圖片庫的結(jié)構(gòu)和行為分離的已經(jīng)很徹底了,但是還是有個(gè)問題,因?yàn)檫@里的圖片鏈接列表剛好是<body>部分的最后一個(gè)元素,如果在這個(gè)圖片列表之后還有其他的一些元素？我們?cè)撛趺醋?我們最初的想法是想讓新創(chuàng)建的元素緊緊的跟在圖片清單的后面,而且不管清單出現(xiàn)在哪個(gè)位置。所以這個(gè)圖片庫的版本還有待改進(jìn)!
?
在學(xué)了通過insertAfter()和insertBefore()向指定元素位置的地方加入元素之后http://www.cnblogs.com/GreenLeaves/p/5731614.html
我們結(jié)合之前所有的學(xué)習(xí)內(nèi)容對(duì)JS圖片庫再做一次改進(jìn),代碼如下:
第六版：
utility.js? 公共庫
/* window.onload事件(當(dāng)頁面加載完畢時(shí)需要調(diào)用的事件,也就是說當(dāng)我們?cè)陂_發(fā)中需要調(diào)用一些JS函數(shù)在頁面加載完畢后執(zhí)行的可以和這個(gè)事件綁定) 但是這個(gè)事件只能綁定一個(gè)函數(shù),如果再次綁定原先的事件會(huì)被覆蓋掉.所以這個(gè)方法就是將頁面加載完畢之后需要的函數(shù)創(chuàng)建一個(gè)隊(duì)列,然后將需要執(zhí)行的函數(shù)一個(gè)個(gè)添加 到隊(duì)列里面; @param func -需要添加到隊(duì)列里面的函數(shù) */ function addOnloadEvent(func) {var oldonload = window.onload;if (typeof window.onload != "function") {window.onload = func; //如果window.onload事件沒有綁定任何function則正常綁定 }else {//如果window.onload事件已經(jīng)綁定了函數(shù),則在原來的基礎(chǔ)上,繼續(xù)添加新的函數(shù)window.onload = function () {oldonload();func();};} }/* addOnloadEvent的擴(kuò)展版因?yàn)槊看翁砑右粋€(gè)函數(shù)都需要調(diào)用addOnloadEvent()函數(shù),所以為了節(jié)省代碼,將需要綁定的函數(shù)名寫入到一個(gè)數(shù)組里面, 然后將數(shù)組引用,傳遞給addOnloadEventlist();每次添加,只需將函數(shù)名,寫到數(shù)組里面即可 @param eventlist -需要與window.onload事件綁定的函數(shù)名數(shù)組 */ function addOnloadEventlist(eventlist) {if (!eventlist) return false;var oldonload = window.onload;window.onload = function () {for (var i = 0; i < eventlist.length; i++) {eventlist[i]();}}}/* 向目標(biāo)元素之后添加新的元素 @param newElement=新元素 @param targetElement=目標(biāo)元素 */ function insertAfter(newElement, targetElement) {/*編寫邏輯1、首先找到給出我們需要插入的元素和用來定位的目標(biāo)元素2、根據(jù)目標(biāo)元素找到兩個(gè)元素的父元素3、判斷目標(biāo)元素是不是父元素內(nèi)的唯一的元素.4、如果是,向父元素執(zhí)行追加操作,就是appendChild(newElement)5、如果不是,向目標(biāo)元素的之后的緊接著的節(jié)點(diǎn)之前執(zhí)行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
function showPic(whichpic) {if (!document.getElementById("placeholder")) return false;if (!document.getElementById("description")) return false;var placeholder = document.getElementById("placeholder");var description = document.getElementById("description");var source = whichpic.getAttribute("href"); //獲取圖片的鏈接地址placeholder.setAttribute("src", source);var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //獲取圖片名稱(判斷圖片超鏈接的文本節(jié)點(diǎn)(圖片名稱)是否存在)if (description.firstChild.nodeType == 3) {description.firstChild.nodeValue = text;}else {return false;}return true; }function preparePlaceholder() {if (!document.getElementById) return false;if (!document.createElement) return false;if (!document.createTextNode) return false;if (!document.getElementsByTagName) return false;//判斷瀏覽器是否支持DOM方法防止瀏覽器不支持網(wǎng)頁出現(xiàn)運(yùn)行錯(cuò)誤//判斷id為imagegallery的元素是否存在,如果不存在的話網(wǎng)頁任能正常運(yùn)行if (document.getElementById("imagegallery")) {var gallery = document.getElementById("imagegallery");var placeholder = document.createElement("img"); //創(chuàng)建一個(gè)圖片展示容器var description = document.createElement("p"); //創(chuàng)建描述var desctxt = document.createTextNode("chose an image");placeholder.setAttribute("id", "placeholder");placeholder.setAttribute("src", "../img/blank.png");description.setAttribute("id", "description");description.appendChild(desctxt);insertAfter(placeholder, gallery);insertAfter(description,placeholder);} } function prepareGallery() {if (!document.getElementById) return false;if (!document.getElementsByTagName) return false;if (!document.getElementById("imagegallery")) return false;var gallery = document.getElementById("imagegallery");var links = gallery.getElementsByTagName("a"); //這里不加判斷是因?yàn)槿绻氵B圖片都沒有,何談功能。for (var i = 0; i < links.length; i++) {links[i].onclick = function () {//showPic(this);//return false; 假設(shè)showPic方法沒有出現(xiàn)問題,return false是正確的做法,但是萬一shwPic出現(xiàn)了問題,這個(gè)時(shí)候返回false,點(diǎn)擊超鏈接將沒有任何反應(yīng),//所以這個(gè)地方這樣該更好return !showPic(this); //如果showPic方法出現(xiàn)問題,超鏈接任然有效符合JavaSciprt平穩(wěn)退化的要求; }} } var eventlist = [preparePlaceholder, prepareGallery]; addOnloadEventlist(eventlist);?
html文件:
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><script src="../js/utility.js" type="text/javascript"></script> <script src="../js/index.js" type="text/javascript"></script> </head> <body><div id="imagegallery"><a href="../img/index.jpg" title="dog_one">圖片一</a><br /><a href="../img/index1.jpg" title="dog_two">圖片二</a><br /><a href="../img/index2.jpg" title="dog_three">圖片三</a><br /><a href="../img/index4.jpg" title="dog_four">圖片四</a></div> </body> </html>現(xiàn)在圖片庫真正的做到了,結(jié)構(gòu)、樣式和行為徹底分離;
不過、這里還可以做下改進(jìn)，將超鏈接的內(nèi)容改成圖片的縮略圖、就是一個(gè)使用的圖片庫了。
?總結(jié)
以上是生活随笔為你收集整理的JavaScript图片库的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux red hat 安装svn
- 下一篇： Zabbix RCE with API