CSS每日一练——实现可折叠的图片展示

最新推荐文章于 2024-07-26 14:13:59 发布

mac_05185

最新推荐文章于 2024-07-26 14:13:59 发布

阅读量626

点赞数 1

分类专栏：前端HTMLCss 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_42544728/article/details/127860293

版权

前端HTMLCss 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

css实现图片伸缩折叠

最终的效果
HTML代码
CSS代码
JavaScript交互处理

最终的效果

效果演示。

在这里插入图片描述

HTML代码

结构较为简单，一个大div包含所有的图片，在细分为6个子div分别包含各自的图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片伸缩展开</title>
    <!-- 指定页面的ico图标 -->
    <link rel="Shortcut Icon" href="./VCG41N1311625369.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./style.css" />
</head>
<body>
    <div class="container">
        <div class="panel active"
            style="background-image: url('https://tse2-mm.cn.bing.net/th/id/OIP-C.IgTKfMRvKFMNbI-hBQXjVAHaEK?w=308&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7');">
            <h3>image 1</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://tse3-mm.cn.bing.net/th/id/OIP-C.HEqx7JGcwqS8PEg4RMMkNQHaJG?w=137&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7');">
            <h3>image 2</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://tse3-mm.cn.bing.net/th/id/OIP-C.2p6_ep-n5EvgZ2mIOBTwfQHaEK?w=295&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7');">
            <h3>image 3</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.QgDGPIzHCCzIIti6Yeh0kQHaEN?w=316&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7');">
            <h3>image 4</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.m1qvEy2J4M5LqKGvQ8bTwQHaNK?w=115&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7');">
            <h3>image 5</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://tse3-mm.cn.bing.net/th/id/OIP-C.ciKGt98sxKb8z3RUCt71lgHaQE?w=115&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7');">
            <h3>image 6</h3>
        </div>
    </div>

    <script src="./script.js"></script>
</body>
</html>

CSS代码

这部分主要涉及flex布局、cubic-bezier三次贝塞尔曲线、以及vw和vh单位；同时也涉及对HTML子元素的选择>。

代码带有详细注释：

* {
    margin: 0;
    padding: 0;
    /* 元素的总高度和宽度包含边距和边框 */
    box-sizing: border-box;
}

body,
html {
    /* 内容会被修剪，并且其余内容是不可见的。 */
    overflow: hidden;
    display: flex;
    /* 居中 */
    justify-content: center;
    /* 交叉轴的中点对齐 */
    align-items: center;
}

.container {
    display: flex;
    /* vw单位可以根据窗口的宽度自动改变大小，1vw是窗口宽度的1%； */
    width: 90vw;
}

.container>.panel {
    /* 背景图仅显示一次 */
    background-repeat: no-repeat;
    /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 */
    background-size: cover;
    /* background-position 属性设置背景图像的起始位置。 */
    background-position: center;
    /* flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 */
    flex: 0.5;
    padding: 10px;
    color: #fff;
    border-radius: 50px;
    margin: 10px;
    /* cube-bezier() 函数定义三次贝塞尔曲线（Cubic Bezier curve）。 */
    /* TODO： https://www.w3school.com.cn/cssref/func_cubic-bezier.asp */
    transition: flex .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    cursor: pointer;
    height: 90vh;
}

.container>.panel>h3 {
    color: aliceblue;
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
    font-size: 25px;
    /* text-align：center 就是把HTML元素中的文本排列到中间的意思。 */
    text-align: center;
    /* 设置以百分比计算的行高 */
    line-height: 90vh;
}

/* 子元素选择器（>）表示的是选择该元素后面的第一代子元素 */
.container>.panel.active {
    flex: 5;
}

JavaScript交互处理

const panelItems = document.querySelectorAll(".container > .panel");
panelItems.forEach(item => {
    item.addEventListener('click', () => {
        [].filter.call(item.parentElement.children, el => el !== item).forEach(el => el.classList.remove('active'));
        item.classList.add('active')
    });
});

forEach方法：调用数组的每一个元素，并把元素传递给回调函数；对于空数组forEach是不会执行回调函数的。
parentElement 属性：parentElement属性返回指定元素的父元素。parentElement和parentNode之间的区别在于：如果父节点不是元素节点，则parentElement返回null。在大多数情况下，使用哪个属性并不重要，但是，parentNode可能是最受欢迎的。此属性是只读的。
classList属性：返回元素的类名，作为DOMTokenList对象。该属性在元素中添加，移除和切换CSS类；classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。