画廊相册—原生JavaScript实现

前言

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

效果

预览前往:点击预览
画廊相册—原生JavaScript实现_第1张图片

思路

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

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

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

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

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

知识点总结

  1. event = “这里添加的相当于是函数体,为分号隔开的字符串,返回值可以影响当前事件是否触发”;
  2. DOM节点操作:nodeValue、firstChild。

代码

html:


<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>DOMtitle>
   <script type="text/javascript" src="./gallery.js">script>
   <link rel="stylesheet" type="text/css" href="layout.css">
head>
<body>
   <div id="imgBox">
   	<h1>Snapshotsh1>
   	<ul id="gallery">
   		<li><a href="./images/boat.jpg" title="A boat with a tiger.">Boata>li>
   		<li><a href="./images/cat.jpg" title="A cute cat.">Cata>li>
   		<li><a href="./images/violin.jpg" title="A pretty violin.">Violina>li>
   		<li><a href="./images/night.jpg" title="Beautiful night in la-la-land.">Nighta>li>
   		<li><a href="./images/spiderman.jpg" title="Spiderman!!!">Spidermana>li>
   		<li><a href="./images/Taylor.jpg" title="Pop-singer Taylor Swift.">Nighta>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;
}

优化

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

你可能感兴趣的:(JavaScript记录,JavaScript小练习)