第四章 案例研究:JavaScript图片库
步骤
- 编写一个优秀的标记文件
- 编写一个由JavaScript函数以首先是用户想要查看的图片
- 由标记触发函数调用
- 使用几个新方法扩展这个JavaScript函数
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>图片库</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
body{
color: #333;
background-color: #ccc;
margin: 5em 10%;
}
a{
color: #333;
text-decoration: none;
font-weight: bold;
}
a:hover{
border-bottom: 1px solid rgb(230, 5, 5);
color: red;
}
li{
float: left;
list-style: none;
padding: 2em;
}
img{
display:block;
width: 700px;
clear: both;
height: 400px;
}
</style>
</head>
<body>
<h1>鬼刀漫画</h1>
<ul>
<li><a href="images/1.jfif" onclick = "showPic(this); return false"; title="tupian1">风</a></li>
<li><a href="images/3.jfif" onclick = "showPic(this); return false"; title="2222">花</a></li>
<li><a href="images/4.jfif" onclick = "showPic(this); return false"; title="3333">雪</a></li>
<li><a href="images/5.jfif" onclick = "showPic(this); return false"; title="44444">月</a></li>
<li><a href="images/6.jfif" onclick = "showPic(this); return false"; title="5555">霜</a></li>
<li><a href="images/7.jfif" onclick = "showPic(this); return false"; title="6666">雨</a></li>
<li><a href="images/8.jfif" onclick = "showPic(this); return false"; title="7777">云</a></li>
<li><a href="images/9.jfif" onclick = "showPic(this); return false"; title="88888">冰</a></li>
</ul>
<img id="photo" src="images/1.jpg" alt="">
<p id="description">这是替换的图片说明</p>
<script>
function showPic(whichPic){
// 获取属性为HREF的
var source = whichPic.getAttribute("href");
// 获取占位符的图片
var photo = document.getElementById("photo")
photo.setAttribute("src",source);
var text = whichPic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
</script>
</body>
</html>
