前言
使用原生JavaScript实现照片长廊效果，主要也是为了练手，刚好看到《JavaScript DOM编程艺术》上有这个小demo，看着还挺好看的，就写一写，还顺带总结几个小知识点。
效果
预览前往：点击预览
思路
拿到一个设计图，还是先从模块开始划分：
- 导航栏和标题
- 图片区域
- 下方文字显示
有了大致框图才能开始逐个突破：
- 标题不说了，导航栏是个典型的
水平一级导航栏，之前也做过很多总结整理，注意清除浮动、对锚点进行样式设置即可。动画过渡通过样式表设置。 - 点击导航栏链接，另外一个区域做出相应，很明显的
onclick事件处理函数的应用，通过DOM获取元素进行设置属性，同时对于锚点的点击事件处理函数里，返回false让锚点点击失效不跳转。 - 下方文字显示是根据不同图片进行改变的，可以将文字信息存储在图片title属性中，
DOM获取当前图片属性值显示在文字块中。
这一次体会了结构层、表现层和行为层的分离，说白了就是把html、样式表和js分成了三个文件，使得JavaScript代码不依赖于HTML文档的内容和结构，这样方便后续管理。
知识点总结
- event = “这里添加的相当于是函数体，为分号隔开的字符串，返回值可以影响当前事件是否触发”；
- DOM节点操作：nodeValue、firstChild。
代码
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript" src="./gallery.js"></script>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<div id="imgBox">
<h1>Snapshots</h1>
<ul id="gallery">
<li><a href="./images/boat.jpg" title="A boat with a tiger.">Boat</a></li>
<li><a href="./images/cat.jpg" title="A cute cat.">Cat</a></li>
<li><a href="./images/violin.jpg" title="A pretty violin.">Violin</a></li>
<li><a href="./images/night.jpg" title="Beautiful night in la-la-land.">Night</a></li>
<li><a href="./images/spiderman.jpg" title="Spiderman!!!">Spiderman</a></li>
<li><a href="./images/Taylor.jpg" title="Pop-singer Taylor Swift.">Night</a></li>
</ul>
<img src="./images/gallery.png" id="placeholder">
<p id="description">Choose an image.</p>
</div>
</body>
</html>
js:
window.onload = function() {
prepareGallery();
}
function prepareGallery() {
var gallery = document.getElementById("gallery");
var links = gallery.getElementsByTagName("a");
for (let j = 0; j < links.length; ++ j) {
links[j].onclick = function() {
showPic(this);
return false;
}
}
}
function showPic(whichpic) {
var placeholder = document.getElementById("placeholder");
// placeholder.src = whichpic.href;
placeholder.setAttribute("src", whichpic.href);
var description = document.getElementById("description");
description.firstChild.nodeValue = whichpic.title;
}
CSS:
body {
background-color: lightgray;
}
div#imgBox {
width: 600px;
margin: 0 auto;
}
img#placeholder {
height: 300px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul>li {
float: left;
}
ul a {
text-decoration: none;
display: block;
background-color: rgb(0, 0, 0);
color: white;
padding: 10px 21.7px;
transition-property: background-color;
transition-duration: 0.5s;
}
ul a:hover {
background-color: rgb(90, 90, 90);
}
ul::after {
content: "";
clear: both;
display: block;
}
div#imgBox p {
font-weight: bold;
}
优化
可以把文字导航栏改成缩略图，再给缩略图增加动画，给下面图片区域增加轮播效果，完善整个相册画廊效果。