1.图片库1.0版

创建图片链接清单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Image Gallery</title>
</head>
<body>
	<h1>Snapshots</h1>
	<ul>
		<li>
			<a href="images/me.jpg" title="me">Beauty</a>
		</li>
		<li>
			<a href="images/horse.jpg" title="horse">Horse</a>
		</li>
		<li>
			<a href="images/person.jpg" title="person">Person</a>
		</li>
		<li>
			<a href="images/bird.jpg" title="bird">Bird</a>
		</li>
	</ul>

</body>
</html>

最终效果

在这里插入图片描述点击Horse链接，浏览器在新窗口载入了这张图片，但返回链接清单只能借助于浏览器的后退（back）按钮。

2.图片库1.1版

改进目标

点击某个链接时，希望留在这个网页而不是转到另一个窗口
点击某个链接时，希望在网页上同时看到图片和图片链接清单

实施方案

增加占位符图片的方法在链接页为图片预留一个浏览区域（为便于显示，为占位符图片设置了内联样式宽度400px，高度300px，代码就不放出），在链接尾部添加如下代码：

<img src="images/place.jpg" id="placeholder" alt="my image gallery">

效果如图：
在这里插入图片描述

点击链接将占位符图片替换为链接对应图片

替换占位图片需要改变它的src属性，编写函数解决。

function showPic(whichPic)
  {
  	var source = whichPic.getAttribute("href");
  	var placeholder = document.getElementById("placeholder");
  	placeholder.setAttribute("src",source);//等价于placeholder.src = scource;这是非DOM解决办法，但只对大部分元素适用，推荐使用DOM方法
  }

编写事件处理函数，事件处理函数的作用是在特定事件发生时调用特定JavaScript代码。上一步只是编写好了替换图片的JavaScript代码，还需要编写在HTML文档中调用的代码。

<ul>
  	<li>
  		<a href="images/me.jpg" onclick="showPic(this); return false;" title="me">Beauty</a>
  	</li>
  	<li>
  		<a href="images/horse.jpg" onclick="showPic(this); return false;" title="horse">Horse</a>
  	</li>
  	<li>
  		<a href="images/person.jpg" onclick="showPic(this); return false;" title="person">Person</a>
  	</li>
  	<li>
  		<a href="images/bird.jpg" onclick="showPic(this); return false;" title="bird">Bird</a>
  	</li>
  </ul>

添加return：false语句的作用是为了阻止a标签默认行为的调用（即1.0版本点击链接在新窗口加载一张图片的行为）

最终结果
在这里插入图片描述

《JavaScript DOM编程艺术》第4章案例：图片库

1.图片库1.0版

2.图片库1.1版

猜你喜欢