JavaScript 图片库
Posted 小许学习笔记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 图片库相关的知识，希望对你有一定的参考价值。
Q：为什么要利用 javascript 创建图片库？
A：① 如果所有图片放在同一个页面，会使页面变得庞大，用户下载页面时需要等待较长时间。
② 如果为每张图片创建一个页面，制作时需要花费许多时间。
③ 如果利用 JS 创建图片库，相比之下页面比较不庞大，制作时花费的时间也较短。
第一步：为图片创建一个链接清单
可以使用无序清单元素（<ul>）来列出这些图片链接。也可以使用有序清单元素（<ol>）来列出这些图片链接。
效果：在窗口点击某个链接就可以转到相应的图片，如果要回到链接清单页面需要借助浏览器的后退按钮。
标记清单：
1 <!DOCTYPE html> 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/1.jpg" title="menhera酱敬礼">menhera酱敬礼</a> 12 </li> 13 <li> 14 <a href="images/2.jpg" title="menhera酱赞">menhera酱赞</a> 15 </li> 16 <li> 17 <a href="images/3.jpg" title="menhera酱找东西吃">menhera酱找东西吃</a> 18 </li> 19 </ul> 20 </body> 21 </html>
页面表现：
点击链接 “menhera酱敬礼”，会转到一个图片窗口：
上面的页面表现基本令人满意。但是可以改进，下面是希望改进的地方：
① 点击链接后，不会转到另一个窗口而是留在当前页面。
② 点击链接后，链接清单与图片同时显示在页面上。
实现步骤：
首先添加一个“占位符”（点击链接后显示图片的地方）。
将一张图片 placeholder.jpg 放到 images 目录下。
标记清单新增一行代码（下面代码高亮部分）：
1 <!DOCTYPE html> 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/1.jpg" title="menhera酱敬礼">menhera酱敬礼</a> 12 </li> 13 <li> 14 <a href="images/2.jpg" title="menhera酱赞">menhera酱赞</a> 15 </li> 16 <li> 17 <a href="images/3.jpg" title="menhera酱找东西吃">menhera酱找东西吃</a> 18 </li> 19 </ul> 20 <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery"/> 21 </body> 22 </html>
页面表现：
此时完成了添加“占位符”。
下面完成把“占位符”替换为点击链接后要显示的图片。
实现将”占位符“替换为点击链接后要显示的图片，可以使用 setAttribute 方法。
上面新增的占位符图片的语句为：<img id="placeholder" src="images/placeholder.jpg" alt="my image gallery"/>
可以通过 setAttribute 方法将 src 属性更改为想显示的图片的文件路径。在这之前需要先通过 getElementById 获取 id 为placeholder 的对象。
来看一下图片清单其中一条图片链接的语句：<a href="images/1.jpg" title="menhera酱敬礼">menhera酱敬礼</a>
要获取想显示的图片的文件路径：需要先获取带 href 属性的元素节点（即指向某个图片的<a>元素），函数 showPic 的参数 whicpic 为这个元素节点，后面再讨论怎么获得。在 showPic 方法内可以在获得的元素节点上调用 getAttribute 获取文件路径，具体做法是将 href 作为参数传递给 getAttribute 。
可以写一个显示图片的函数 showPic，并将 showPic.js 放在 js 目录下，在 gallery.html 中引用 showPic.js。
在 gallery.html </body>标签之前添加语句引用 showPic.js，语句：<script src="js/showPic.js"></script>
showPic.js 代码：
1 //whicpic代表元素节点(指向某个图片的<a>元素) 2 function showPic(whicpic){ 3 //获取想要显示的图片的文件地址, 并将它存入变量 source 4 var source = whicpic.getAttribute(\'href\'); 5 //利用 id 属性获取占位符图片，并将返回值存入变量 placeholder 6 var placeholder = document.getElementById(\'placeholder\'); 7 //替换“占位符”图片为想看的图片 8 placeholder.setAttribute("src", source); 9 }
接下来应用 showPic.js ，将它与标记文档结合起来。
给图片列表的链接添加行为，也就是事件处理函数（event handler）。
需要实现的是点击图片链接触发图片展示在“占位符”位置，那么可以使用 onclick 事件处理函数。
但是链接被点击有默认行为（转到图片窗口），需要阻断这个默认行为。onclick 函数工作机制里面有一点：如果 JS 代码返回值为 "true"，onclick 会认为链接被点击了，如果 JS 代码返回值为 “false”，onclick 会认为链接没有被点击。所以，可以利用这一点，在 JS 代码加一条“return false;”的语句，这样点击链接转到图片窗口的默认行为就会被中止。
showPic() 函数需要一个参数（带 href 属性的一个元素节点）。把 onclick 事件处理函数嵌入到一个链接中时，使用 this 做参数，在这里 this 表示 “这个 <a> 元素节点 ”。
代码：
1 <!DOCTYPE html> 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/1.jpg" title="menhera酱敬礼" onclick="showPic(this);return false;">menhera酱敬礼</a> 12 </li> 13 <li> 14 <a href="images/2.jpg" title="menhera酱赞" onclick="showPic(this);return false;">menhera酱赞</a> 15 </li> 16 <li> 17 <a href="images/3.jpg" title="menhera酱找东西吃" onclick="showPic(this);return false;">menhera酱找东西吃</a> 18 </li> 19 </ul> 20 <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery"/> 21 <script src="js/showPic.js"></script> 22 </body> 23 </html>
目前，基本实现了想要改进两点：① 点击链接后，不会转到另一个窗口而是留在当前页面。② 点击链接后，链接清单与图片同时显示在页面上。
页面效果：
点击链接 “ menhera酱找东西吃 ” ，“占位符” 区域展示了该图片。
文件目录：
images文件夹、js文件夹、gallery.html 在 gallery 目录下。
图片1.jpg、2.jpg、3.jpg、placeholder.jpg 在 images 目录下。showPic.js 在js目录下。
以上是关于JavaScript 图片库的主要内容，如果未能解决你的问题，请参考以下文章