javascript簡單的圖片庫

為什么使用圖片庫

在網頁中,如果一張網頁加載太多的圖片,那么這張網頁將會顯示很慢,而且浪費用戶流量,而javasrcipt來創圖片庫將是最佳的選擇:把整個圖片庫的瀏覽鏈接集中安排在圖片庫主頁里,只在用戶點擊了這個頁面里的某個圖片鏈接時才把相應的圖片傳送給他。

方法
<html>
<head>
<script>
 function showPic(whichPic){
    var source=whichPic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
 
 }

</script>
</head>
<body>
<ul>
//return false的話超鏈接的默認行為則不起作用
<li ><a href="image/1.jpg" onclick="showPic(this);return   false;">1.jpg</a></li>
<li ><a href="image/2.jpg" onclick="showPic(this);return false;">2.jpg</a></li>
<li ><a href="image/3.jpg" onclick="showPic(this);return false;">3.jpg</a></li>
<li ><a href="image/4.jpg" onclick="showPic(this);return false;">4.jpg</a></li>
<li ><a href="image/5.jpg" onclick="showPic(this);return false;">5.jpg</a></li>
<li ><a href="image/6.jpg" onclick="showPic(this);return false;">6.jpg</a></li>
<li ><a href="image/7.jpg" onclick="showPic(this);return false;">7.jpg</a></li>
<li ><a href="image/8.jpg" onclick="showPic(this);return false;">8.jpg</a></li>
<li ><a href="image/9.png" onclick="showPic(this);return false;">9.png</a></li>
<li ><a href="image/10.png" onclick="showPic(this);return false;">10.png</a></li>

</ul>

<image id="placeholder" src="image/11.jpg" alt="this is picture's placeholder">

</body>
</html>

childNodes屬性:

在一顆節點樹上,childNodes屬性可以用來獲取任何一個元素的所有子元素,它是一個包含這個元素全部子元素的數組

nodeType
  • 元素節點的nodeType的屬性值是1
  • 屬性節點的nodeType的屬性值是2
  • 文本節點的nodeType的屬性值是3
nodeValue屬性

如果想要改變一個文本節點的值就需要使用nodeValue屬性。但nodeValue屬性獲取description對象的值時,得到的并不是包含在這個段落里的文本。

用description.childNodes[0].nodeValue來獲取文本節點的值而不是用description.nodeVlue;其中childNodes[0]等價于firstChild;而lastChild就是這個子節點中最后一個元素

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容