画廊相册—原生JavaScript实现

最新推荐文章于 2024-04-22 09:52:01 发布

原创

最新推荐文章于 2024-04-22 09:52:01 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#画廊 #CSS #DOM

前言

使用原生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