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

    css实现图片伸缩折叠

    最终的效果

    效果演示。

    在这里插入图片描述

    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>
    
    <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 1h3>
        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 2h3>
        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 3h3>
        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 4h3>
        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 5h3>
        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 6h3>
        div>
    div>

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    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')
    });
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • forEach方法：调用数组的每一个元素，并把元素传递给回调函数；对于空数组forEach是不会执行回调函数的。
    • parentElement 属性：parentElement属性返回指定元素的父元素。parentElement和parentNode之间的区别在于：如果父节点不是元素节点，则parentElement返回null。在大多数情况下，使用哪个属性并不重要，但是，parentNode可能是最受欢迎的。此属性是只读的。
    • classList属性：返回元素的类名，作为DOMTokenList对象。该属性在元素中添加，移除和切换CSS类；classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
  • 相关阅读:
    东北大学工程训练CNC加工中心（坤图）
    超越中心化：Web3如何塑造未来数字生态
    某些设置由你的组织来管理
    java毕业生设计忆居民宿管理计算机源码+系统+mysql+调试部署+lw
    基于C++的朴素贝叶斯分类器
    智安网络|面临日益增长的安全威胁：云安全和零信任架构的重要性
    leetcode最大间距（桶排序+Python）
    掌握Explain分析性能瓶颈、避免索引失效
    微信小程序wx.previewImage实现图片预览
    TypeScript实战之用TS封装Axios
  • 原文地址：https://blog.csdn.net/qq_42544728/article/details/127860293