index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JavaScript图片库</title> 6 <script type="text/javascript" src="placeholder.js"></script> 7 </head> 8 <body> 9 <ul id="gallery"> 10 <li><a href="image/1 (1).jpg" title="不错的毛玻璃1">毛玻璃1</a> </li> 11 <li><a href="image/1 (2).jpg" title="不错的毛玻璃2">毛玻璃2</a> </li> 12 <li><a href="image/1 (3).jpg" title="不错的毛玻璃3">毛玻璃3</a> </li> 13 <li><a href="image/1 (4).jpg" title="不错的毛玻璃4">毛玻璃4</a> </li> 14 </ul> 15 <img id="placeholder" src="image/placeholder.jpg" alt="My Image Gallery" /> 16 <p id="description">Choose an image</p> 17 </body> 18 </html>
placeholder.js
1 <!--平稳退化，JS和HTML标记分离，极致性能的JS图片库--> 2 function showPic(whichPic){ 3 var placeholder=document.getElementById("placeholder"); 4 if(!placeholder){ 5 return false; 6 } 7 var source=whichPic.getAttribute("href"); 8 placeholder.setAttribute("src",source); 9 var desc=document.getElementById("description"); 10 if(desc){ 11 var text=whichPic.getAttribute("title"); 12 desc.childNodes[0].nodeValue=text; 13 } 14 return true; 15 } 16 function bind(){ 17 if(!document.getElementById){ 18 return false; 19 } 20 if(!document.getElementsByTagName){ 21 return false; 22 } 23 var myGallery=document.getElementById('gallery'); 24 var a=myGallery.getElementsByTagName("a"); 25 for(var i=0;i< a.length;i++){ 26 a[i].onclick=function(){ 27 return !showPic(this); 28 } 29 } 30 } 31 window.onload=bind;