js小练习（五）：简易电子相册的制作

最新推荐文章于 2023-02-01 15:01:24 发布

原创

最新推荐文章于 2023-02-01 15:01:24 发布 · 2.6k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍如何利用JavaScript和CSS实现一个简易的电子相册。核心思路包括使用DOM操作获取点击内容，避免a标签跳转，采用flex布局。在实现过程中遇到点击放大效果与阻止跳转冲突的问题，有待解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一）核心思想：

（1）写一个占位模块作为展板，通过getattribute和setattribute来获取点击内容。a标签设置onclick事件return false,获取但不跳转。

（2）考虑到平稳退化，尽可能的不使用内嵌函数。

（3）布局基本使用flex盒子模型。

（二）实现代码：
（1）html部分：

 <!--照片列表-->
    <div>
        <ul id="imageGallery">
            <li><a href="../../images/albumImgs/1.jpg" title="tree" >图片1</a></li>
            <li><a href="../../images/albumImgs/2.jpg" title="clerk"  > 图片2</a></li>
            <li><a href="../../images/albumImgs/3.jpg" title="waterlemon"  >图片3</a></li>
            <li><a href="../../images/albumImgs/4.jpg" title="book">图片4</a></li>
        </ul>
    </div>



    <!--展示板-->
    <div class="box">
        <img id="placeHolder" src="../../images/albumImgs/3.jpg" alt="my album" >
        <p id="description"> 显示描述</div>
    </div>

（2）js部分：