ExpandingCard扩展卡片
文章目录
- 演示效果
- 分析思路
- 核心代码
- 总结
源码
演示效果

分析思路
- 使用flex布局,每个卡片的宽度都由flex进行灵活调整
- 交互可以增加和删除active,来实现宽度扩增和恢复
- 还需要使用transition进行动画过渡,使得平滑切换
核心代码
首先创建一个容器container,里面包含5个卡片,进行布局样式。
.container .card {height: 80vh;margin: 10px;position: relative;border-radius: 50px;background-size: cover;background-repeat: no-repeat;background-position: center;flex: 0.5;cursor: pointer;transition: all 700ms ease-in;
}
flex
flex是复合属性,复合了: flex-grow 、flex-shrink 、flex-basis 三个属性,默认值为0 1 auto。
flex-grow: 0.5:这表示当父容器有多余空间时,该flex项目将能够增长,但其增长能力是其他flex-grow值为1的项目的0.5倍。如果另一个flex项目的flex-grow值为1,那么当空间分配时,这个值为0.5的项目将只获得一半的空间增长量。
补充
flex:1 1 auto,简写: flex:autoflex:1 1 0,简写: flex:1flex:0 0 auto,简写: flex:noneflex:0 1 auto,简写: flex:0 auto (flex 初始值)- 非负数字,等同于 flex:非负数字 1 0% ,能放大也能缩小,数字代表占父级剩余尺寸份数
- 像素值,等同于 flex 1 1 像素值,能放大也能缩小,像素值代表容器在分配多余空间之前,子项所占的主轴空间。
我们一般用flex:数值来代表占父元素剩余尺寸的份数。
给具有active类的标签设置flex为5。
.container .card.active {flex: 5
}
交互可以使用js实现。获取所有卡片,forEach循环给卡片增加一个active类,在增加之前,需要先移除卡片已经有的active类,再进行添加。
这样做的好处是,原本已经扩增的卡片,可以恢复到原来的宽度,而点击增加active类的卡片,可以扩增。
const cards = document.querySelectorAll(".card");cards.forEach((card) => {card.addEventListener("click", () => {removeActiveClass();card.classList.add("active");});
});
// 移除active类
function removeActiveClass() {cards.forEach((card) => {card.classList.remove("active");});
}
这里也可以做一个屏幕适配,使用媒体查询。当屏幕尺寸到达一个宽度,会有两个卡片进行隐藏。
/* 媒体查询 */
@media (max-width:580px) {.container {width: 100vw;}.card:nth-child(4),.card:nth-child(5) {display: none;}
}
总结
这是一个很初级的project,主要的是通过active类的增删,再结合flex布局来实现。
参考官方例子:github.com
相关文章:
ExpandingCard扩展卡片
文章目录 演示效果分析思路核心代码总结 源码 演示效果 分析思路 使用flex布局,每个卡片的宽度都由flex进行灵活调整交互可以增加和删除active,来实现宽度扩增和恢复还需要使用transition进行动画过渡,使得平滑切换 核心代码 首先创建一个…...
移远通信推出八款天线新品,覆盖5G、4G、Wi-Fi和LoRa领域
近日,全球领先的物联网整体解决方案供应商移远通信宣布,再次推出八款高性能天线新品,进一步丰富其天线产品阵容,更好地满足全球客户对高品质天线的更多需求。具体包括5G超宽带天线YECT005W1A和YECT004W1A、5G天线YECT028W1A、4G天…...
MySQL 9从入门到性能优化-创建触发器
【图书推荐】《MySQL 9从入门到性能优化(视频教学版)》-CSDN博客 《MySQL 9从入门到性能优化(视频教学版)(数据库技术丛书)》(王英英)【摘要 书评 试读】- 京东图书 (jd.com) MySQL9数据库技术_夏天又到了…...
UE5 第三人称学习之动画 control rig
这个东西和建模软件里有的是一个东西,然后IK就是你动脚,他帮你算出小腿大腿该怎么动,FK就是你自己动了大腿,摆小腿,然后再摆脚 就是给每一根骨骼搞一个控制器,给他一个容易选中和操作更明显的图形作为控制…...
C++之--初见模板初阶
一、泛型编程 为了实现一个通用的函数,在此之前,我们学过函数重载,使用函数重载虽然可以实现,但是有一下几个不好的地方: 1. 重载的函数仅仅是类型不同,代码复用率比较低,只要有新类型出现时&a…...
Nature|用于无线监测颅内信号的植入式柔性超声波传感器(柔性传感/健康监测/植入式电子/水凝胶)
华中科技大学臧剑锋(Jianfeng Zang)、华中科技大学同济医学院附属协和医院姜晓兵(Xiaobing Jiang)和新加坡南洋理工大学陈晓东(Xiaodong Chen)团队,在《Nature》上发布了一篇题为“Injectable ultrasonic sensor for wireless monitoring of intracranial signals”的论…...
【和AI的《趣味》聊天】01 AI:你找茬是吧(
我: 以下哪个选项是中文? A.Chinese B.英文 AI: 我: 这不对吧,我说的是那个选项的语言是中文 AI: 非常抱歉,我之前的回答有误。您问的是哪个选项的语言是中文,那么答案应该是…...
“发放父作业单”是“过数”用例里面的内容吗
刘京城 2020-4-14 23:01 。。。。(注:这是一个人的昵称,不是省略号) 首先,执行者是同一个,那么思考焦点要关注“过数”用例是不是“发放父作业单”用例的一个步骤,和行为操作的频率无关,而是和责任有关&am…...
Linux补基础之:网络配置
目录 一、检查主机与虚拟机是否能正常通信 二、网络的连接模式 桥接模式 流程 特点 NAT模式 流程 特点 仅主机 流程 特点 三、修改静态IP 四、可能遇到的问题 防火墙 DNS 五、主机名更改 六、登录服务器 实际的大数据管理中,会有由很多服务器构成的…...
【flink】之kafka到kafka
一、概述 本文档旨在介绍如何使用Apache Flink从Kafka接收数据流,并将处理后的数据写入到另一个Kafka Topic中。Apache Flink是一个开源的流处理框架,能够处理无界和有界数据流,并且支持高吞吐量和低延迟的数据处理。通过Flink与Kafka的集成…...
微信小程序时间弹窗——年月日时分
需求 1、默认当前时间2、选择时间弹窗限制最大值、最小值3、每次弹起更新最大值为当前时间,默认值为上次选中时间4、 minDate: new Date(2023, 10, 1).getTime(),也可以传入时间字符串new Date(2023-10-1 12:22).getTime() html <view class"flex bb ptb…...
杂货 | 每日资讯 | 2024.11.1
注意:以下内容皆为AI总结 2024年11月1日,人工智能(AI)领域发生了多项重要事件,标志着技术发展的新阶段。本文将详细探讨以下三大事件: OpenAI为ChatGPT新增搜索功能IEEE发布《2025年及以后的技术影响》报…...
Genmoai-smol:专为单 GPU 优化的开源 AI 视频生成模型,低显存生成高质量视频
❤️ 如果你也关注大模型与 AI 的发展现状,且对大模型应用开发非常感兴趣,我会快速跟你分享最新的感兴趣的 AI 应用和热点信息,也会不定期分享自己的想法和开源实例,欢迎关注我哦! 🥦 微信公众号ÿ…...
RHCE8
一、防火墙 防火墙:防火墙是位于内部网和外部网之间的屏障,它按照系统管理员预先定义好的规则来控制数据包的进出。防火墙又可以分为硬件防火墙与软件防火墙。 硬件防火墙是由厂商设计好的主机硬件,这台硬件防火墙的操作系统主要以提供数据…...
长短期记忆网络(LSTM)如何在连续的时间步骤中处理信息
长短期记忆网络(LSTM)如何在连续的时间步骤中处理信息 长短期记忆网络(LSTM)是一种高级的循环神经网络(RNN),设计用来解决传统RNN在处理长时间序列数据时遇到的梯度消失或爆炸问题。LSTM通过其…...
MySQL基础(三)
一. 插入内容insert tips: (一)SQL中 表示 字符串,可以用 也可以用 " C/C、Java中, 表示字符," 表示字符串SQL/Python/JS,没有字符类型,只有字符串, 和 &qu…...
浏览器八股
面试系列文章 万字总结我在寒冬里的面试准备经历前端铜九铁十面试必备八股文——【HTML&CSS】前端铜九铁十面试必备八股文——【JavaScript】前端铜九铁十面试必备八股文——【Vue】前端铜九铁十面试必备八股文——【浏览器】前端铜九铁十面试必备八股文——【网络相关】前…...
华为机试HJ18 识别有效的IP地址和掩码并进行分类统计
首先看一下题 描述 请解析IP地址和对应的掩码,进行分类识别。要求按照A/B/C/D/E类地址归类,不合法的地址和掩码单独归类。 所有的IP地址划分为 A,B,C,D,E五类 A类地址从1.0.0.0到126.255.255.255; B类地址从128.0.0.0到191.255.255.255; C类地址从192.0.…...
计算机网络——TCP拥塞控制原理
吞吐量 端口有16位...
ubuntu-开机黑屏问题快速解决方法
开机黑屏一般是由于显卡驱动出现问题导致。 快速解决方法: 通过ubuntu高级选项->recovery模式->resume->按esc即可进入recovery模式,进去后重装显卡驱动,重启即可解决。附加问题:ubuntu的默认显示管理器是gdm3,如果重…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
day52 ResNet18 CBAM
在深度学习的旅程中,我们不断探索如何提升模型的性能。今天,我将分享我在 ResNet18 模型中插入 CBAM(Convolutional Block Attention Module)模块,并采用分阶段微调策略的实践过程。通过这个过程,我不仅提升…...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机(无人驾驶飞行器,UAV)技术的快速发展,其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统,无人机的“黑飞”&…...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型(Primitive) 和 对象类型(Object) 两大类,共 8 种(ES11): 一、原始类型(7种) 1. undefined 定…...
Golang——9、反射和文件操作
反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一:使用Read()读取文件2.3、方式二:bufio读取文件2.4、方式三:os.ReadFile读取2.5、写…...
