数量众多的图片放一个网页里会导致网页加载速度变慢, 在我们希望能够有一个图片库, 只有用户点击图片链接时才加载相应的图片资源.
1. 编写 html 文档
第一步工作是为图片创建一个链接清单, 如果是无序的排列可以用 <ul>, 如果是有序的排列可以用 <ol>
- <ul>
- <li><a href="images/1.jpg" title="1">1</a></li>
- <li><a href="images/2.jpg" title="1">2</a></li>
- <li><a href="images/3.jpg" title="1">3</a></li>
- <li><a href="images/4.jpg" title="1">4</a></li>
- </ul>
我们希望能够点击链接之后直接看到图片, 而不是转到另一个窗口.
所以需要完成以下几点改进:
通过增加一个 "占位符", 为这个页面预留一个浏览区
点击链接时将拦截这个网页的默认行为
点击链接时将把占位符图片替换成链接相对应的图片
于是我们先解决占位符图片的问题
<img src="images/7.jpg" id="placeholder" alt="my image gallery">
2. 编写 javascript 函数
首先定义一个函数 showpic(), 将参数定义为 witchpic, 代表一个元素节点, 获取 "href" 属性值, 存入一个名为 source 的变量中
var source=whichpic.getAttribute("href");
然后定义一个变量 placeholder, 用于获取 id 名为 "placeholder" 的元素
var placeholder=document.getElementById("placeholder");
最后用 setAttribute() 方法对 placeholder 元素的 src 属性进行刷新
- placeholder.setAttribute("src",source);
- // 等价于 placeholder.src=source 改变占位符图片资源属性
3.JavaScript 函数的调用
通过事件处理函数, 例如点击 () 或鼠标悬停 (onmouseover) 等事件处理函数, 基本语法为
event="javascript statement(s)"
这里我们将使用事件处理 showpic(this) 方法 (this 表示这个对象)
, 并且返回值为 false, 表示这个链接没有被点击, 从而拦截这个网页的默认跳转行为.
="showpic(this);return false;"
然后嵌入到 html 文档中
<li><a href="images/1.jpg" title="1" ="showpic(this);return false;">1</a></li>
4. 对 JavaScript 函数进行功能拓展
我们还可以在网页中实现文本切换的效果
首先定义一个变量 text 获取图片链接的 "title" 属性
var text=whichpic.getAttribute("title");
在 html 中增加一段描述性的文本
<p id="describe"> 这是一段描述 </p>
使用 nodeValue 属性刷新 <p> 元素中的内容, nodeValue 可以用来改变文本节点的值,
- var describe=document.getElementById('describe');
- describe.childNodes[0].nodeValue=text;
注意: alert(describe.nodeValue 的) 显示为 null
alert(describe.childNodes[0].nodeValue) 显示的才是标签 p 中的内容
最后 html 代码为
- <ul>
- <li><a href="images/1.jpg" title="1" ="showpic(this);return false;">1</a></li>
- <li><a href="images/2.jpg" title="2" ="showpic(this);return false;">2</a></li>
- <li><a href="images/3.jpg" title="3" ="showpic(this);return false;">3</a></li>
- <li><a href="images/4.jpg" title="4" ="showpic(this);return false;">4</a></li>
- </ul>
js 代码为
- <script type="text/javascript">
- function showpic(whichpic){
- var source=whichpic.getAttribute("href");
- var placeholder=document.getElementById("placeholder");
- placeholder.setAttribute("src",source);
- var text=whichpic.getAttribute("title");
- var describe=document.getElementById('describe');
- describe.childNodes[0].nodeValue=text;
- }
- </script>
可以修改 CSS 样式让界面更加美观
为了遵从良好的 js 和网页结构分离原则, 我们对图片库进行进一步的改进:
把文档中所有链接全放入一个数组里
遍历数组
给链接绑定点击事件, 点击链接时能调用 shoupic() 函数
- var link=document.getElementsByTagName('a');
- for (var i = 0; i < link.length; i++) {
- link[i].=function () {
- return showpic(this);
- }
- }
来源: https://www.imooc.com/article/13981