JavaScript 图片库
JavaScript 图片库
任务：编写一个 JavaScript 函数以显示用户想要查看的图片。
思路：将所有图片链接放在主页里，只在用户点击了某个图片链接时才把对应的「图片」与「文字」传送给他。
步骤：
1.在主页增添一个 “占位图片” ，预留一个图片浏览区域。
2.在主页上为“目标文本”安排显示位置。
3.点击链接时把 “占位图片” 替换为链接对应的目标图片，同时「文字」替换为 “目标文本” 。
4.拦截网页默认的跳转行为。
操作：
1.编写 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<link rel="styleshet" href="layout.css" media="screen">
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li><a href="lion.jpg" title="lion">lion</a></li>
<li><a href="sea.jpg" title="sea">sea</a></li>
<li><a href="work.jpg" title="work">work</a></li>
</ul>
<img id="placeholder" src="welcome.jpg" alt="image gallery"> <!--“占位图片”-->
<p id="description">Choose an image.</p> <!--“占位文字”-->
<script type="text/javascript" src="showPic.js"></script>
</body>
</html>
2.编写 CSS
/*layout.css 以下有些内容后续会用到。*/
body {
font-family: "Helvetica","Arial",serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
img {
display: block;
clear: both;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
display: inline;
}
3.编写 JavaScript 及分析
JavaScript代码需要解决：「“占位图片”的替换」、「“占位文字”的替换」和「拦截网页默认的跳转行为」。
使用getAttribute方法获取“占位图片”的src属性，然后用setAttribute方法修改src属性替换为目标图片。
/*showPic.js*/
function showPic(whichpic) {
var source = whichpic.getAttribute('href'); //获取目标图片链接存到变量 source
var placeholder = document.getElementById('placeholder'); //获取“占位图片”对象存到变量 placeholder
placeholder.setAttribute('src',source); //用 source 里的目标图片链接修改“占位图片”链接
}
把图片链接里的title属性取出来让它和对应的图片一同显示在网页上，使用nodeValue属性刷新这段描述。
/*showPic.js*/
function showPic(whichpic) {
var text = whichpic.getAttribute('title'); //获取`title`属性值存到变量 text
var description = document.getElementById('description'); //获取“占位文字”对象存到变量 description
description.firstChild.nodeValue = text; //实现文本替换
}
4.给图片列表的链接添加行为（事件处理函数）
「事件处理函数」：在特定事件发生时调用特定的javascript代码。
点击某个图片链接时触发行为，使用onclick事件处理函数，把onclick嵌入到图片链接中时，要把这个链接本身用作showpic函数的参数。
使用this关键字，this表示这个<a>元素节点。
onclick = "showPic(this)"这样便可以调用showpic函数了。
5.拦截网页的默认跳转行为
「事件处理函数」的工作机制：添加「事件处理函数」后，一旦「事件」发生，相应的JavaScript代码便会执行，被调用的JavaScript代码返回一个值。
给图片链接添加onclick事件处理函数，让触发的JavaScript代码返回「布尔值」true或false
返回true，说明“图片链接被点击了。”，返回false，说明“图片链接没有被点击。”
onclick = "showPic(this); return false;"这样便可阻止用户被带到目标链接窗口。
最终代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<link rel="styleshet" href="layout.css" media="screen">
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li><a href="lion.jpg" title="lion" onclick="showPic(this); return false;">lion</a></li>
<li><a href="sea.jpg" title="sea" onclick="showPic(this); return false;">sea</a></li>
<li><a href="work.jpg" title="work" onclick="showPic(this); return false;">work</a></li>
</ul>
<img id="placeholder" src="welcome.jpg" alt="image gallery">
<p id="description">Choose an image.</p>
<script type="text/javascript" src="showPic.js"></script>
</body>
</html>
/*showPic.js*/
function showPic(whichpic) {
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src',source);
var text = whichpic.getAttribute('title');
var description = document.getElementById('description');
description.firstChild.nodeValue = text;
}
以上代码存放于 GitHub ：JavaScript-
END
THANK
网友评论