JS DOM 编程艺术(第2版)读书笔记第6章图片库改进版

来源：互联网发布：数据库层次模型编辑：程序博客网时间：2024/04/29 07:29

把时间处理函数移出文档
向后兼容
确保可访问
支持平稳退化
检测对象和方法是否存在

直接上代码有详细注释：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>图片库</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 body{background:#CCC;margin:1em 10%;} 9 img{width:300px;height:300px;display:block;}10 ul{overflow:hidden;}11 li{float:left;list-style:none;padding:0 5px;}12 </style>13 </head>14 <body>15 16 <h1>photo</h1>17 <div id="imgBox">18     <ul>19         <li><a href="images/Koala.jpg" title="Koala">Koala</a></li>20         <li><a href="images/Desert.jpg" title="Desert">Desert</a></li>21         <li><a href="images/Tulips.jpg" title="Tulips">Tulips</a></li>22         <li><a href="images/Lighthouse.jpg" title="Lighthouse">Lighthouse</a></li>23     </ul>24 25     <img id="placeholder" src="images/Koala.jpg" alt="" />26 27     <p id="description">Choose an image.</p>28 </div>29 <script type="text/javascript">30 31 // window.onload 添加多个事件32 function addLoadEvent(func) {33 var oldonload = window.onload;34 if(typeof oldonload != "function"){35         window.onload = func;36     }else{37         window.onload = function(){38             oldonload();39             func();40         }41     }42 }43 44 addLoadEvent(prepareGallery);45 46 function prepareGallery(){47     48 // 检测对象或方法是否存在49 if(!document.getElementById) return false;50 if(!document.getElementsByTagName) return false;51 if(!document.getElementById("imgBox"))return false;52 var gallery = document.getElementById("imgBox");53     links = gallery.getElementsByTagName("a");54 for (var i = 0, l = links.length; i < l; i++) {55         links[i].onclick = function(){56 // 巧妙的运用showPic函数的返回值57 // return showPic(this) ? false : true;58 return !showPic(this);59         }60 //links[i].onkeypress = //links[i].onclick;61     }62 }63 64 function showPic(obj) {65 // 对象检测66 if(!document.getElementById("placeholder")) return false;67 68 /* 69      * 获得当前对象的href值，如安装有本地服务器：70      * IE6和IE7返回  "http://localhost/images/Koala.jpg"71      * 标准浏览器返回 "images/Koala.jpg"72      * 为了然所有浏览器都返回一致的结果，给getAttribute()添加第二个参数为2.73      * 谨记：getAttribute("href")和getAttribute("href", 2);浏览器兼容性。74 */75 var url = obj.getAttribute("href",2);76 var place = document.getElementById("placeholder");77     place.setAttribute("src", url);78 79 if(document.getElementById("description")){80 var text = obj.getAttribute("title");81 var description = document.getElementById("description");82 // firstChild必须存在，也就是说 <p id="description">这里必须有内容</p> 下面这行代码才有效。 其实这种情况常用 description.innerHTML = text;83         description.firstChild.nodeValue = text;84     }85 return true;86 }87 88 </script>89 90 </body>91 </html>

0 0

JS DOM 编程艺术(第2版)读书笔记 第6章 图片库改进版

JS DOM 编程艺术(第2版)读书笔记第6章图片库改进版