案例:將整個圖片庫的瀏覽鏈接幾種安排在圖片庫主頁裏,在用戶點擊某個圖片連接時才把相應的圖片傳送出來。
javascript
圖片素材: 將圖片素材 存放入 images文件夾中,並將文件夾與 html 放在同一級目錄下。css
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; 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 coffee">Coffee</a> </li> <li> <a href="images/rose.jpg" title="A red, red rose">Rose</a> </li> <li> <a href="images/bigben.jpg" title="The famous clock">Big Ben</a> </li> </ul> </body> </html>
若是圖片已經排好順序,能夠用 有序清單元素 <ol> 來標記這些圖片連接。html
這樣這個網頁就作好了,可是若是想瀏覽不一樣的圖片,就須要藉助 瀏覽器的後退按鈕。能夠作以下改進:
java
a. 經過增長一個「佔位符」圖片的辦法在這個主頁上爲圖片預留一個瀏覽區域
node
b. 點擊某個圖片的連接時,攔截網頁的默認行爲(跳轉到圖片頁面),並將圖片顯示在「佔位符」圖片瀏覽器
將代碼: <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> 插入到 </ul> 後。效果圖以下:函數
下面要編寫 JavaScript 代碼來實現 顯示圖片了。
性能
建議將 JavaScript 代碼寫入單獨的 .js 文件,在 html 文檔中應用。咱們新建一個 showPic.js 並放入 html 文檔的 相同目錄下的 scripts 文件夾中。代碼以下:ui
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Image Gallery</title> </head> <body> <h1>Snapshots</h1> <ul> <li> <a href="images/fireworks.jpg" title="A fireworks display" onClick="showPic(this);return false;">Fireworks</a> </li> <li> <a href="images/coffee.jpg" title="A cup of black coffee" onClick="showPic(this);return false;">Coffee</a> </li> <li> <a href="images/rose.jpg" title="A red, red rose" onClick="showPic(this);return false;">Rose</a> </li> <li> <a href="images/bigben.jpg" title="The famous clock" onClick="showPic(this);return false;">Big Ben</a> </li> </ul> <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> <script type="text/javascript" src="scripts/showPic.js"></script> </body> </html>
function showPic(whichPic) { var placeholder = document.getElementById("placeholder"); var picSrc = whichPic.getAttribute("href"); placeholder.setAttribute("src", picSrc); }
若一個站點用到多個 JavaScript 文件,爲了減小對站點的請求次數(提升性能),應該儘可能把這些 .js 文件 合併到一個文件中。this
上面代碼中使用到了 onclick 事件處理函數,而且在使用函數 showPic(this)時使用了 this 關鍵字,this 表明了 <a> 這個元素節點。同時咱們應該注意到,在showPic()函數後面,咱們增長了 return=false; 代碼,這是爲了 阻止 連接被點擊時跳轉的默認行爲。
事件處理函數的工做機制:在給某個元素添加了事件處理函數後,一旦事情發生,相應的 JavaScript 代碼就會被執行。被調用的 JavaScript 代碼能夠返回一個值,這個值將被傳遞給那個事件處理函數。因此上面咱們使用 return=false; 來阻止跳轉到連接窗口。
下面咱們給 顯示的圖片加一個文本描述,每次點擊圖片的時候,將圖片的 title 顯示出來。在「佔位符」圖片下面加一個 <p>元素:
<p id="description">Choose a image</p>
使用 前一篇 中的 childNodes、nodeValue、firstChild 等元素屬性來 改變 description。在 showPic.js 的 showPic function 中作出修改。
function showPic(whichPic) { //show picture var placeholder = document.getElementById("placeholder"); var picSrc = whichPic.getAttribute("href"); placeholder.setAttribute("src", picSrc); //replace description of image var text = whichPic.getAttribute("title"); var description = document.getElementById("description"); description.firstChild.nodeValue = text; }
若是想讓圖片庫更美觀,能夠加入如下 css 樣式表,並在 <head> 中加入 <link> 標籤引入樣式。
link rel="stylesheet" type="text/css" href="styles/layout.css"/>
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; }