JavaScriptDOM编程学习笔记（二）图片库案例

《JavascriptDOM编程艺术》提供一个图片库的demo，主要讲解如何更好的使用JavaScript在网页中，跟随作者的思路来分析一下这个案例

首先需求是将图片发布到网上，但是如果发布的图片比较多，那么页面就会变得过于庞大，那么当用户在访问网页的时候需要下载的数据量就非常可观了，而现实是，很少有用户会等待很长很长的时间去下载一个网页

因此，基于上述原因，为每张图片分别创建一个网页的方案就值得考虑，这样就能将图片库拆分到许多尺寸合理，便于下载和浏览的的页面，不过这样的一个解决方案面对的问题就是分别创建一个网页需要花费的时间和精力，以及需要为每个网页上增加某种导航链接来给出当前图片在整个图片库的位置，方便浏览用户跳转到其他网页

为了两全其美，我们使用JavaScript创建图片库就是一个很棒的选择：将整个图片库的浏览链接集中安排在图片库的主页，当用户点击了这个主页的图片链接时将响应的图片传递给用户

来看第一版的图片库的显示效果

下面的图片库的标记清单

 1 <!DOCTYPE>
 2 <html lang="en">
 3 <head>
 4   <meta charset=utf-8" />
 5   <title>Image Gallery</title>
 6 </head>
 7 <body>
 8   <h1>Snapshots</h1>
 9   <ul>
10     <li>
11       <a href="images/fireworks.jpg" title="一朵绚烂的烟花">烟花</a>
12     </li>
13     <li>
14       <a href="images/coffee.jpg" title="一杯卡布奇诺">咖啡</a>
15     </li>
16     <li>
17       <a href="images/rose.jpg" title="一束玫瑰">玫瑰</a>
18     </li>
19     <li>
20       <a href="images/bigben.jpg" title="著名的大本钟">大本钟</a>
21     </li>
22   </ul>
23 </body>
24 </html>

网页显示的效果是一个列表，比较遗憾的是有几个地方需要改进

当点击了链接之后，希望能留在页面而不是跳转到新的页面，这样不需要借助浏览器退回按钮返回
当点击图片链接时，在当前页面看到那张图片以及原有的图片清单

为了实现这些要改进的目标，我们可以这么操作一波

通过增加一个占位符图片来为图片的预览保留一个浏览区域
在点击链接时，拦截这个网页的默认行为
在点击链接时候，将占位符图片替换为对应的图片

完成后的页面效果如下

当点击对应的图片时，会自动展示对应的图片效果，标记清单如下

 1 <!DOCTYPE>
 2 <html lang="en">
 3 <head>
 4   <meta charset=utf-8" />
 5   <title>图片库</title>
 6   <!-- 将占位符区域的图片替换 -->
 7   <script type="text/javascript" src="scripts/showPic.js"></script>
 8 </head>
 9 <body>
10   <h1>图片库</h1>
11   <ul>
12     <li>
13         <!-- 单击触发showPic函数，this:关键字表示当前元素，即这个对象  -->
14         <a href="images/fireworks.jpg" title="一朵绚烂的烟花" onclick="showPic(this); return false;">烟花</a>
15     </li>
16     <li>
17         <a href="images/coffee.jpg" title="一杯卡布奇诺" onclick="showPic(this); return false;">咖啡</a>
18     </li>
19     <li>
20         <a href="images/rose.jpg" title="一束玫瑰" onclick="showPic(this); return false;">玫瑰</a>
21     </li>
22     <li>
23         <a href="images/bigben.jpg" title="著名的大本钟" onclick="showPic(this); return false;">大本钟</a>
24     </li>
25   </ul>
26   <!-- 占位符 -->
27   <img id="placeholder" src="images/placeholder.gif" alt="我的图片库" />
28 </body>
29 </html>

showPic函数的代码

1 //替换占位符placeholder元素的src元素为whichpic元素的href属性
2 function showPic(whichpic) {
3     //whichpic:对应的<a>元素
4     var source = whichpic.getAttribute("href");//获取whichpic的href属性值
5     var placeholder = document.getElementById("placeholder");//获取占位符图片
6     placeholder.setAttribute("src",source);//刷新元素的src属性
7 }

在这里需要了解一下浏览器事件处理函数的工作机制：

在给某个元素添加了事件处理函数后，一旦事件发生，相应的JavaScript代码就会被执行，被调用的Javascript代码可以返回一个值，这个值将被传递给那个事件处理函数。以上文为例，我们给链接加上了onclick事件处理函数，并让这个处理函数触发的JavaScript代码返回布尔值。当该链接被点击，假设那段JavaScript代码返回值是true，onclick事件处理函数就认为“该链接被点击了”，反之，如果返回值为false,onclick事件处理函数就认为“这个链接没有被点击”

可以写个测试验证下

1 <a href="http://www.cnblogs.com/luqinghua/" onclick="return false;">点击</a>

当点击该链接时，因为onclick触发事件函数返回值为false，所以这个链接的默认行为没有被触发

除了能在一个页面上切换图片，我们还希望能看到将图片的属性title也展示在页面上

 1 <!DOCTYPE>
 2 <html lang="en">
 3 <head>
 4   <meta charset=utf-8" />
 5   <title>图片库</title>
 6   <!-- 将占位符区域的图片替换 -->
 7   <script type="text/javascript" src="scripts/showPic.js"></script>
 8 </head>
 9 <body>
10   <h1>图片库</h1>
11   <ul>
12     <li>
13         <!-- 单击触发showPic函数，this:关键字表示当前元素，即这个对象  -->
14         <a href="images/fireworks.jpg" title="一朵绚烂的烟花" onclick="showPic(this); return false;">烟花</a>
15     </li>
16     <li>
17         <a href="images/coffee.jpg" title="一杯卡布奇诺" onclick="showPic(this); return false;">咖啡</a>
18     </li>
19     <li>
20         <a href="images/rose.jpg" title="一束玫瑰" onclick="showPic(this); return false;">玫瑰</a>
21     </li>
22     <li>
23         <a href="images/bigben.jpg" title="著名的大本钟" onclick="showPic(this); return false;">大本钟</a>
24     </li>
25   </ul>
26   <!-- 占位符 -->
27   <img id="placeholder" src="images/placeholder.gif" alt="我的图片库" />
28   <!-- 显示文本 -->
29   <p id="description">请选择一张图片</p>
30 </body>
31 </html>

我们在标记清单上新增了一个描述节点，在显示图片时，把这个文本节点的值替换成目标图片的title的值

 1 //替换占位符placeholder元素的src元素为whichpic元素的href属性
 2 function showPic(whichpic) {
 3     //whichpic:对应的<a>元素
 4     var source = whichpic.getAttribute("href");//获取whichpic的href属性值
 5     var placeholder = document.getElementById("placeholder");//获取占位符图片
 6     placeholder.setAttribute("src",source);//刷新元素的src属性
 7     
 8     var text = whichpic.getAttribute("title");//获取whichpic的title属性值
 9     var description = document.getElementById("description");//获取用于描述的文本节点的值
10     description.firstChild.nodeValue = text;//刷新元素的文本内容
11 }

这里要扩展下JavaScript的childNodes属性，用于获取任何元素的所有子元素，然后根据每个节点都有的nodeType属性，判断节点类型

元素节点的nodeType属性值是1
属性节点的nodeType属性值是2
文本节点的nodeType属性值是3

nodeType的属性有12种值，但仅有上述三种有实用价值，这也意味着，可以编写只对特定类型节点进行处理的函数

需要注意到，在showPic代码中，我们使用的是

1 description.firstChild.nodeValue = text;//刷新元素的文本内容

因为直接使用nodeValue获取的节点值并不是对应的文本值，而是null，可以使用alert(description.nodeValue)进行验证。我们真正需要的是<p>元素包含的文本的值，包含在<p>元素中的文本是另一种节点，也就是<p>元素的第一个子节点，所以使用description.childNodes[0].nodeValue就可以找到需要的文本，而我们使用的则是firstChild，即等同于childNodes[0]，同理，还有一个与之相对的lastChild等同于node.childNodes[node.childNodes.length - 1]，即最后一个子节点

完成了上述内容后，页面展示效果如下

到这里一个很不错的图片库就已经完成了，可以换上自己喜欢的图片在浏览器中看看是否满意，最后，我们还可以给这个页面披上一件漂亮的外衣---CSS样式

 1 <style type="text/css">
 2             body {
 3                 font-family: "Helvetica","Arial",serif;
 4                 color: #333;
 5                 background-color: #ccc;
 6                 margin: 1em 10%;
 7             }
 8 
 9             h1 {
10                 color: #333;
11                 background-color: transparent;
12             }
13 
14             a {
15                 color: #c60;
16                 background-color: transparent;
17                 font-weight: bold;
18                 text-decoration: none;
19             }
20 
21             ul {
22                 padding: 0;
23             }
24 
25             li {
26                 float: left;
27                 padding: 1em;
28                 list-style: none; /* 去掉左侧的点 */
29             }
30 
31             img {
32                 display: block;
33                 clear: both;
34             }
35 
36             #imagegallery {
37                 list-style: none;
38             }
39 
40             #imagegallery li {
41                 display: inline;
42             }
43 
44             #imagegallery li a img {
45                 border: 0;
46             }
47  </style>

然后就可以看到页面的巨大变化了

以上就是《JavaScriptDOM编程艺术》一书中展示的图片库demo，如有错漏，欢迎指正，有疑问欢迎留言

JavaScriptDOM编程学习笔记（二）图片库案例

猜你喜欢