title: 《DOM編程藝術(shù)》二、javascript圖片庫(kù)
date: 2017-06-03 10:00:29
tags: DOM編程藝術(shù)
從這一篇開(kāi)始會(huì)逐步完成一個(gè)圖片庫(kù)的案例，但我們不能直接把所有的圖片直接放到一個(gè)頁(yè)面里，因?yàn)閳D片下載的時(shí)間較長(zhǎng)，用戶(hù)需要等待很長(zhǎng)時(shí)間去加載一個(gè)網(wǎng)頁(yè)，所以我們需要一個(gè)圖片庫(kù)，把整個(gè)圖片庫(kù)的瀏覽鏈接集中安排在主頁(yè)里，只在用戶(hù)點(diǎn)擊了這個(gè)主頁(yè)里的某個(gè)圖片鏈接時(shí)才把相應(yīng)的圖片加載。
1、建立基礎(chǔ)的HTML結(jié)構(gòu)
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8"/>
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href = "images/fireworks.jpg" title = "A fireworks display">Fireworks</a>
</li>
<li>
<a href = "images/coffee.jpg" title = "A cup of black offee">Coffee</a>
</li>
<li>
<a href = "images/rose.jpg" title = "A red,red rose">Rose</a>
</li>
<li>
<a href = "images/bigen.jpg" title = "The famous clock">Big Ben</a>
</li>
</ul>
</body>
</html>
2、改進(jìn)圖片庫(kù)
這個(gè)網(wǎng)頁(yè)現(xiàn)在的功能是：
清單列表中的每個(gè)鏈接分別指向不同的圖片，點(diǎn)擊跳轉(zhuǎn)到相應(yīng)的圖片頁(yè)面。
從圖片返回列表要借助于瀏覽器的back功能。
需要改進(jìn)的地方：
點(diǎn)擊某個(gè)鏈接時(shí)，能留在這網(wǎng)頁(yè)而不是轉(zhuǎn)到另一個(gè)窗口。
點(diǎn)擊某個(gè)鏈接時(shí)，能在這個(gè)網(wǎng)頁(yè)上同時(shí)看到那張圖片及原有清單列表。
點(diǎn)擊某個(gè)鏈接時(shí)，在圖片的下方顯示改圖片的描述文字。
完成上述目標(biāo)要完成的幾項(xiàng)改進(jìn)：
通過(guò)增加一個(gè)占位圖片的辦法在這個(gè)主頁(yè)上為圖片預(yù)留一個(gè)瀏覽區(qū)域。
點(diǎn)擊某個(gè)鏈接時(shí)，攔截這個(gè)網(wǎng)頁(yè)的默認(rèn)行為。把占位圖片替換為與那個(gè)鏈接相對(duì)應(yīng)的圖片。
點(diǎn)擊某個(gè)鏈接時(shí)，獲取鏈接的描述文字，保存到圖片下方的位置。
第一步、增加占位圖片
html部分
<img id = "placeholder" src = "images/placeholder.jpg" alt = "my image galley"/>
js部分
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
為了把占位圖片替換為要查看的圖片，需要一個(gè)方法來(lái)改變它的src屬性。
參數(shù)whichpic代表一個(gè)指向某個(gè)圖片的a元素，變量source是參數(shù)a元素的href屬性值，變量placeholder是占位圖片的元素對(duì)象。
我們還有另一種方法，也就是非DOM方法，直接用
placeholder.src = source;，效果等同于placeholder.setAttribute("src",source);，我選擇DOM方法的原因是setAttribute是第1級(jí)DOM，它的兼容性和可移植性更好，DOM本身適用于任何一種標(biāo)記語(yǔ)言，DOM是一種適用于多種環(huán)境和多種程序設(shè)計(jì)語(yǔ)言的通用型API，而非DOM方法只能適用于web瀏覽器，所以在以后的選擇時(shí)，盡量選擇DOM方法。
最后將該方法單獨(dú)存為一個(gè)叫做show_pic.js的文件并引用。在實(shí)際開(kāi)發(fā)中，可以將多個(gè)功能放到一個(gè)js文件中，這樣可以減少對(duì)站點(diǎn)的請(qǐng)求次數(shù)，提高性能。
<script src="script/script.js"></script>
第二步、事件處理函數(shù)
事件處理函數(shù)的作用是在特定事件發(fā)生時(shí)，調(diào)用特定的javascript代碼。這個(gè)案例中要使用的是onclick點(diǎn)擊事件。
<a href = "images/fireworks.jpg" onclick = "showPic(this);return false;" title = "A fireworks display">Fireworks</a>
在每一條鏈接上增加onlcick事件和處理程序。showPic就是之前寫(xiě)好的方法，將this作為參數(shù)傳進(jìn)去，this這里指的就是a元素對(duì)象。
return false的作用是阻止默認(rèn)行為被調(diào)用，a元素的默認(rèn)行為是打開(kāi)一個(gè)新窗口，我不需要這個(gè)效果，所以要組織。
事件處理函數(shù)的工作機(jī)制：在給某個(gè)元素添加了事件處理函數(shù)后，一旦事件發(fā)生，javascript代碼便會(huì)執(zhí)行，這些被調(diào)用的javascript代碼可以返回一個(gè)值，這個(gè)值將被傳遞給事件處理函數(shù)，具體到此案例中，當(dāng)onclick被觸發(fā)時(shí)，如果執(zhí)行的代碼返回true，onclick事件處理函數(shù)就會(huì)認(rèn)為這個(gè)鏈接被點(diǎn)擊了，如果返回false，onclick事件處理函數(shù)就認(rèn)為這個(gè)鏈接沒(méi)有被點(diǎn)擊，所以當(dāng)onclick認(rèn)為沒(méi)有點(diǎn)擊鏈接，自然也不會(huì)打開(kāi)一個(gè)新鏈接。
第三步、增加圖片描述文字
現(xiàn)在我要用DOM給圖片增加一段描述，這段描述的位置在img標(biāo)簽之后，同時(shí)也起到了占位符的作用
<p id="description">Choose an image</p>
為了實(shí)現(xiàn)這個(gè)功能也需要擴(kuò)展一下showPic函數(shù)。
獲取a標(biāo)簽的title屬性值，并存入變量text。
獲取描述文本的元素，id值為description的p元素，保存到變量description。
把description對(duì)象的第一個(gè)子節(jié)點(diǎn)的nodeValue屬性值設(shè)置為變量text的值。
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute('title'); // 1
var description = document.getElementById('description'); // 2
description.firstChild.nodeValue = text; // 3
}
這里設(shè)置描述文本我使用的是nodeChild屬性，nodeChild屬性可以設(shè)置和獲取文本元素的文本內(nèi)容。需要注意的是必須是文本節(jié)點(diǎn)。
比如description是一個(gè)元素節(jié)點(diǎn)，那么description.nodeChild獲取的就是null，用description的子節(jié)點(diǎn)才有效description.firstChild.nodeChild，這里description只有一個(gè)子節(jié)點(diǎn)并且是文本節(jié)點(diǎn)，所以使用firstChild和lastChild都一樣，如果description有好幾個(gè)子元素，要獲取其中的某個(gè)可以用children[index]來(lái)獲取。
最終效果
最后我們?cè)黾右恍ヽss樣式來(lái)美化一下頁(yè)面,創(chuàng)建style.css文件并引入html文件中。
body {
font-family: "Helvetica","Arial",serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
img {
display: block;
clear:both;
}
以下是script.js文件的最終內(nèi)容
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute('title');
var description = document.getElementById('description');
description.firstChild.nodeValue = text;
}
html文件的最終結(jié)構(gòu)如下
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8"/>
<title>Image Gallery</title>
<link rel="stylesheet" type="" href="./css/style.css">
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href = "images/fireworks.jpg" onclick = "showPic(this);return false;" title = "A fireworks display">Fireworks</a>
</li>
<li>
<a href = "images/coffee.jpg" onclick = "showPic(this);return false;" title = "A cup of black offee">Coffee</a>
</li>
<li>
<a href = "images/rose.jpg" onclick = "showPic(this);return false;" title = "A red,red rose">Rose</a>
</li>
<li>
<a href = "images/bigben.jpg" onclick = "showPic(this);return false;" title = "The famous clock">Big Ben</a>
</li>
</ul>
<img id = "placeholder" src = "images/placeholder.gif" alt = "my image galley"/>
<p id="description">Choose an image</p>
<script src="script/script.js"></script>
</body>
</html>
頁(yè)面的最終效果如下，點(diǎn)擊i鏈接可以改變圖片和描述文字。
