一、photos.html頁面，點擊每一張縮略圖，就在占位符的位置那里，顯示對應(yīng)的大圖。

看到的頁面效果是這樣的：

?

1、實現(xiàn)思路

這個功能在之前的JavaScript美術(shù)館那里已經(jīng)實現(xiàn)了。

首先在頁面中使用ul列表顯示出所有的縮略圖，然后使用JavaScript，for循環(huán)檢查出當(dāng)前點擊的是哪一張圖片，最后把這張圖片給顯示出來。

用到三個函數(shù)：顯示圖片函數(shù)、創(chuàng)建占位符預(yù)裝圖片、點擊顯示圖片

2、代碼

（1）制作四張400px*300px的圖片，然后把這四張圖片縮小到100*100px的縮略圖。把這八張圖片都放進images/photos的文件夾里。

（2）新建一個photos.html

首先，把template.html的代碼拷貝到photos.html中；

然后，講div為content的部分替換為如下：

<div id="content"><h1>Photos of the band</h1><ul id="imagegallery"><li><a href="images/photos/basshead.jpg" title="我的圖片1"><img src="images/photos/thumbnail_basshead.jpg" alt="漂亮的圖片"/></a></li><li><a href="images/photos/bassist.jpg" title="我的圖片2"><img src="images/photos/thumbnail_bassist.jpg" alt="漂亮的圖片"/></a></li><li><a href="images/photos/drummer.jpg" title="我的圖片3"><img src="images/photos/thumbnail_drummer.jpg" alt="漂亮的圖片"/></a></li><li><a href="images/photos/lineup.jpg" title="我的圖片4"><img src="images/photos/thumbnial_lineup.jpg" alt="漂亮的圖片"/></a></li></ul></div>

?

3、修改webdesign.css樣式

追加如下樣式：#imagegallery li{

? ? ? ? ? ? ? ? ? ? ? display:inline; ? ? ?

? ? ? ? ? ? ? ? ? ? }

?

4、創(chuàng)建photos.js。用來編寫photos頁面的js效果

/***********************顯示圖片*********************/ function showPic(whichpic){//瀏覽器 對象檢測if(!document.getElementById("placeholder")) return false;//獲取元素var source = whichpic.getAttribute("href");var placeholder = document.getElementById("placeholder");//顯示圖片placeholder.setAttribute("src",source); //把當(dāng)前圖片的src賦值給占位符圖片//設(shè)置顯示描述圖片的文字if(!document.getElementById("description")) return false;if(whichpic.getAttribute("title")){var text = whichpic.getAttribute("title");}else{var text = "";}var description = document.getElementById("description");if(description.firstChild.nodeType == 3){description.firstChild.nodeValue = text;}return false; }/***************創(chuàng)建定位符預(yù)裝圖片***********************/ function preparePlaceholder(){//瀏覽器對象檢測if(!document.getElementById) return false;if(!document.createTextNode) return false;if(!document.createElement) return false;if(!document.getElementById("imagegallery")) return false;//設(shè)置新創(chuàng)建元素的屬性var placeholder = document.createElement("img");placeholder.setAttribute("id","placeholder");placeholder.setAttribute("src","./images/placeholder.png");placeholder.setAttribute("alt","我的圖片");var description = document.createElement("p");description.setAttribute("id","description");var desctext = document.createTextNode("請選擇一張圖片：");description.appendChild(desctext);//掛載顯示新創(chuàng)建元素var gallery = document.getElementById("imagegallery");insertAfter(description,gallery);insertAfter(placeholder,description); }/***************點擊，顯示圖片*************************/ 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 = document.getElementsByTagName("a");//顯示當(dāng)前圖片（for循環(huán)實現(xiàn)）for(var i=0; i<links.length; i++){links[i].onclick = function(){return showPic(this);}} }addLoadEvent(preparePlaceholder); addLoadEvent(prepareGallery);

?

5、打開瀏覽器瀏覽，看到效果，photos頁面ok啦！

二、學(xué)與思

1、li的樣式設(shè)置為inline

#imagegallery li{

? ? ? ? ? ? ? ? ? ? ? display:inline; ? ? ?

? ? ? ? ? ? ? ? ? ? }

塊級元素變成行內(nèi)元素，這樣子所有的li就能水平顯示。

2、nodeType==3為文本節(jié)點類型

description.firstChild.nodeType == 3

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/wuyinghong/p/3731346.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript网站设计实践（五）编写photos.html页面，实现点击缩略图显示大图的效果...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。