JavaScript & DOM 學習筆記(四)

案例:將整個圖片庫的瀏覽鏈接幾種安排在圖片庫主頁裏,在用戶點擊某個圖片連接時才把相應的圖片傳送出來。
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;
}
相關文章
相關標籤/搜索