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

最新推荐文章于 2024-09-05 17:28:20 发布

我爱吃兔兔

最新推荐文章于 2024-09-05 17:28:20 发布

阅读量2.6k

点赞数 2

分类专栏： JavaScript js

本文链接：https://blog.csdn.net/qq_36680300/article/details/82972919

版权

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

摘要由CSDN通过智能技术生成

（一）核心思想：

（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>



    <!--展示板