标签：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JavaScript图片库</title> 6 <script type="text/javascript"> 7 <!--平稳退化，JS和HTML标记分离，极致性能的JS图片库--> 8 function showPic(whichPic){ 9 var placeholder=document.getElementById("placeholder"); 10 if(!placeholder){ 11 return false; 12 } 13 var source=whichPic.getAttribute("href"); 14 placeholder.setAttribute("src",source); 15 var desc=document.getElementById("description"); 16 if(desc){ 17 var text=whichPic.getAttribute("title"); 18 desc.childNodes[0].nodeValue=text; 19 } 20 return true; 21 } 22 function bind(){ 23 if(!document.getElementById){ 24 return false; 25 } 26 if(!document.getElementsByTagName){ 27 return false; 28 } 29 var myGallery=document.getElementById(‘gallery‘); 30 var a=myGallery.getElementsByTagName("a"); 31 for(var i=0;i< a.length;i++){ 32 a[i].onclick=function(){ 33 return !showPic(this); 34 } 35 } 36 } 37 window.onload=bind; 38 </script> 39 </head> 40 <body> 41 <ul id="gallery"> 42 <li><a href="image/1 (1).jpg" title="不错的毛玻璃1">毛玻璃1</a> </li> 43 <li><a href="image/1 (2).jpg" title="不错的毛玻璃2">毛玻璃2</a> </li> 44 <li><a href="image/1 (3).jpg" title="不错的毛玻璃3">毛玻璃3</a> </li> 45 <li><a href="image/1 (4).jpg" title="不错的毛玻璃4">毛玻璃4</a> </li> 46 </ul> 47 <img id="placeholder" src="image/placeholder.jpg" alt="My Image Gallery" /> 48 <p id="description">Choose an image</p> 49 </body> 50 </html>
平稳退化，JS和HTML标记分离，极致性能的JavaScript图片库
标签：
原文地址：http://www.cnblogs.com/gangtiexia/p/5138072.html
