画廊相册—原生JavaScript实现

前言

使用原生JavaScript实现照片长廊效果，主要也是为了练手，刚好看到《JavaScript DOM编程艺术》上有这个小demo，看着还挺好看的，就写一写，还顺带总结几个小知识点。

效果

预览前往：点击预览
导航栏为文字版本

思路

拿到一个设计图，还是先从模块开始划分：

  • 导航栏和标题
  • 图片区域
  • 下方文字显示

有了大致框图才能开始逐个突破：

  1. 标题不说了，导航栏是个典型的水平一级导航栏，之前也做过很多总结整理，注意清除浮动、对锚点进行样式设置即可。动画过渡通过样式表设置。
  2. 点击导航栏链接，另外一个区域做出相应，很明显的onclick事件处理函数的应用，通过DOM获取元素进行设置属性，同时对于锚点的点击事件处理函数里，返回false让锚点点击失效不跳转。
  3. 下方文字显示是根据不同图片进行改变的，可以将文字信息存储在图片title属性中，DOM获取当前图片属性值显示在文字块中。

这一次体会了结构层、表现层和行为层的分离，说白了就是把html、样式表和js分成了三个文件，使得JavaScript代码不依赖于HTML文档的内容和结构，这样方便后续管理。

知识点总结

  1. event = “这里添加的相当于是函数体，为分号隔开的字符串，返回值可以影响当前事件是否触发”；
  2. 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;
}

优化

可以把文字导航栏改成缩略图，再给缩略图增加动画，给下面图片区域增加轮播效果，完善整个相册画廊效果。

posted @ 2019-05-17 23:54  绣花  阅读(218)  评论(0)  编辑  收藏  举报