手撸一个Switch开关组件
一、前言
手撸系列又来了,这次咱们来撸一个Switch开关组件,废话不多说,咱们立刻发车。
二、使用效果
三、实现分析
首先我们先不想它的这个交互效果,我们就实现“不合格”时的一个静态页面,静态页面大致如下:
3.1、静态页面
html结构如下:
<div class="switch-box"> <!-- 整个组件的最外层 --><div class="switch-handle"></div><!-- 小球 --><div class="switch-content"> <!-- 小球下面的内容 --><span class="buhege">不合格</span></div></div>
css样式如下:
.switch-box {position: relative;box-sizing: border-box;width: 94px;height: 32px;overflow: hidden;border-radius: 40px;background-color: #FF5735;}.switch-handle {position: absolute;width: 30px;height: 30px;background-color: #fff;border-radius: 50%;top: 50%;transform: translate(0, -50%);}.switch-content {width: 100%;height: 100%;box-sizing: border-box;display: flex;align-items: center;justify-content: flex-end;color: #FFFFFF;font-size: 16px;padding-right: 10px;}
3.2、小球滚动
静态页面我们现在是有了,我们现在先想办法让它动起来,最常见的办法就是改变小球的transform样式,代码如下:
let startStatus = '不合格';function click1 (){let handle = document.querySelector('.switch-handle');if (handle && startStatus == '不合格'){// 向右平移handle.style.transform = 'translate(64px, -50%)';startStatus = '合格';return}if (handle && startStatus == '合格'){// 向左平移handle.style.transform = 'translate(0, -50%)';startStatus = '不合格';return}}
html结构如下:
<div class="switch-box"><div class="switch-handle"></div><div class="switch-content" onclick="click1()"><!-- +++++新增代码 --><span class="buhege">不合格</span></div></div>
现在我们实现了小球位置的改变(效果如下),但是我们发现,现在小球的位置都是瞬间就改变了,没有任何的过渡效果,这样给用户的感觉像是交互不太好的感觉。
添加过渡效果:
.switch-handle {position: absolute;width: 30px;height: 30px;background-color: #fff;border-radius: 50%;top: 50%;transform: translate(0, -50%);transition: all .3s; +++++++++ 新增加的代码}// 其余代码都不变
添加过渡效果后的效果如下(明显的丝滑):
3.3、改变底色
这块没啥好说的,就是当小球的位置发生改变后,背景颜色也要跟着相应改变,代码如下:
function click1 (){let handle = document.querySelector('.switch-handle');// ++++++新增代码let contentBackground = document.querySelector('.switch-box');if (handle && startStatus == '不合格'){handle.style.transform = 'translate(64px, -50%)';startStatus = '合格';// ++++++++ 新增代码contentBackground.style.background = '#18B681';return}if (handle && startStatus == '合格'){handle.style.transform = 'translate(0, -50%)';startStatus = '不合格';contentBackground.style.background = '#FF5735';return}}
效果如下:
3.4、改变文字
这个跟改变背景色其实也差不多,就是小球滚动时,动态的改变innerHTML,代码如下:
// 其余代码都一样,核心代码如下:
if (handle && startStatus == '不合格'){document.querySelector('span').innerHTML = '合格';return
}
if (handle && startStatus == '合格'){document.querySelector('span').innerHTML = '不合格';return
}
效果现在是这样的:
这么看起来"文字"也是瞬间就改变,我们也想要一个文字之间的过渡效果,"合格"把"不合格"给挤掉,或者"不合格"把"合格"挤掉。
为了完成这样的效果,那么此时我们就必须将这2个状态文字都在html里预制上,这也是使用过渡样式的前提,最后呢,通过 transform 与 overflow的配合,完成最后的效果,具体思路如下:
- 初始化为"不合格"的状态,当点击触发时,需要将"合格"平移至容器内,将"不合格"平移至 容器外
- 此时的状态为"合格",当点击再次触发时,需要将"合格"还原至原来的位置,将"不合格"平移至 容器内
最终代码如下:
let startStatus = '不合格';function click1 (){let handle = document.querySelector('.switch-handle');let contentBackground = document.querySelector('.switch-box');let hege = document.querySelector('.hege');let buhege = document.querySelector('.buhege');if (handle && startStatus == '不合格'){handle.style.transform = 'translate(64px, -50%)';startStatus = '合格';hege.style.transform = 'translate(10px, 0)';buhege.style.transform = 'translate(52px, 0)';contentBackground.style.background = '#18B681';return}if (handle && startStatus == '合格'){handle.style.transform = 'translate(0, -50%)';startStatus = '不合格';hege.style.transform = 'translate(-30px, 0)';buhege.style.transform = 'translate(0, 0)';contentBackground.style.background = '#FF5735';return}}
html结构如下:
<div class="switch-box"><div class="switch-handle"></div><div class="switch-content" onclick="click1()"><span class="hege">合格</span><span class="buhege">不合格</span></div></div>
css如下:
.switch-box {margin-left: 500px;margin-top: 100px;position: relative;box-sizing: border-box;width: 94px;height: 32px;overflow: hidden;border-radius: 40px;background-color: #FF5735;}.switch-handle {position: absolute;width: 30px;height: 30px;background-color: #fff;border-radius: 50%;top: 50%;transform: translate(0, -50%);transition: all .3s;}.switch-content {width: 100%;height: 100%;box-sizing: border-box;display: flex;align-items: center;justify-content: space-between;color: #FFFFFF;font-size: 16px;padding-right: 10px;}span {font-size: 14px;transition: all .3s;}span[class="hege"] {transform: translate(-30px, 0);}
四、最后
好啦,今天的手撸系列就完事了,关于switch开关组件有更好的想法的话,欢迎评论区里讨论,那么下次再见喽
最后
为大家准备了一个前端资料包。包含54本,2.57G的前端相关电子书,《前端面试宝典(附答案和解析)》,难点、重点知识视频教程(全套)。



有需要的小伙伴,可以点击下方卡片领取,无偿分享
相关文章:
手撸一个Switch开关组件
一、前言 手撸系列又来了,这次咱们来撸一个Switch开关组件,废话不多说,咱们立刻发车。 二、使用效果 三、实现分析 首先我们先不想它的这个交互效果,我们就实现“不合格”时的一个静态页面,静态页面大致如下&#x…...
2023年1月冰箱品牌销量排行:销量环比增长26%,销售额36亿+
鲸参谋电商大数据2023年1月京东平台“冰箱”销售数据出炉! 根据鲸参谋平台电商数据显示,2023年1月份,在京东平台上,冰箱的销量将近130万件,环比增长26%,同比下滑8%;销售额达36亿,环比…...
DSP CCS 开发问题总结及解决办法
文章目录 问题汇总 1. CCS编译器的Project菜单栏工程导入选项丢失,怎么解决! 1.1启动CCS后发现导入工程菜单栏丢失,无法导入工程文件。 1.2方法一 工程选项的导入工程文件丢失,如果要重新获得相应的选项,就需要删除当前…...
Vue3.x+Element Plus仿制Acro Design简洁模式分页器组件
Vue3.xElement Plus仿制Acro Design简洁模式分页器组件 开发中难免会遇到宽度很窄的列表需要使用分页器的情况,这时若使用Element Plus组件的分页器会导致分页器内容超出展示的区域,而Element Plus组件中目前没有Acro Design那样小巧的分页器(…...
经典文献阅读之--VoxelMap(体素激光里程计)
0. 简介 作为激光里程计,常用的方法一般是特征点法或者体素法,最近Mars实验室发表了一篇文章《Efficient and Probabilistic Adaptive Voxel Mapping for Accurate Online LiDAR Odometry》,同时还开源了代码在Github上。文中为雷达里程计提…...
.NET6中使用GRPC详细描述
Supported languages | gRPC,官网。至于原理就不说了,可以百度原理之后,然后再结合代码,事半功倍,就能很好理解GRPC了。 目录 一、简单使用 二、实际应用 一、简单使用 1.使用vs2022创建一个grpc程序,…...
ML@矩阵微积分基础
文章目录矩阵微积分Matrix calculus记法简单Jacobi Matrix分子记法分母记法一般形式的Jacobi MatrixTypes of matrix derivative向量求导向量对标量求导标量对向量求导向量对向量求导矩阵求导矩阵对标量求导(切矩阵)标量对矩阵求导记法向量求导 向量对标量求导标量对向量求导向…...
华为OD机试真题Python实现【优秀学员统计】真题+解题思路+代码(20222023)
优秀学员统计 题目 公司某部门软件教导团正在组织新员工每日打卡学习活动,他们开展这项学习活动已经一个月了,所以想统计下这个月优秀的打卡员工。每个员工会对应一个 id,每天的打卡记录记录当天打卡员工的 id 集合,一共 30 天。 请你实现代码帮助统计出打卡次数 top5 的…...
docsify在线文档支持pdf查看
目录 步骤一:添加插件 步骤二:添加pdf地址 步骤三:成果展示 docsify是一个在github上很好用的文档转换网页的工具,但是大部分情况我们都是使用的markdown文件。最近想把pdf文档也能支持在这上面展示,研究后总结一下…...
ES6中Set类型的基本使用
在ES6之前,存储数据的结构主要有两种:数组、对象。 在ES6中新增了另外两种数据结构(存放数据的方式):Set、Map,以及他们的另外形式WeakSet、WeakMap。 Set的基本使用 Set是一个新增的数据结构,…...
【VUE3.0_CSS功能】
CSS功能组件css作用域深度选择器(标签名空格:deep(标签名))插槽选择器(:soltted(标签名))全局选择器(:global(类名))动态CSS(v-bind)useCSSModule拓展知识:deep的写法组件…...
微机原理复习总结6:汇编语言程序设计
本篇博客主要分享几道汇编语言例题编写一完整的程序,从键盘输入一组字符,直到输入“0”为止,当输入是小写字母时,则修改为大写字母,输入的字符存放在string为首址的存储单元中。data segment ;数据段定义 st…...
计算机网络 部分原理和过程
下面是一台计算机 Ping 和不在同一 IP 网络上的另一台计算机的全过程: 该计算机首先确定要 Ping 的目标 IP 地址,并检查该 IP 地址是否与本地 IP 地址在同一 IP 网络上。如果目标 IP 地址与本地 IP 地址不在同一 IP 网络上,则需要通过路由器…...
C++实现链表
C实现链表 众所周知,C/C语言实现的链表是由一个一个的结点构成,每个结点分为数据域和指针域,指针域中存储了其后继结点的地址,通过地址来访问下一个结点。 链表是一系列节点串联形成的数据结构,链表存储有序的元素集合…...
MySQL索引篇
文章目录说明:索引篇一、索引常见面试题按数据结构按物理存储分类按字段特性分类按字段个数分类索引缺点:什么时候适用索引?什么时候不需要创建索引?常见优化索引的方法:发生索引失效的情况:二、从数据页角…...
Ardiuno-交通灯
LED交通灯实验实验器件:■ 红色LED灯:1 个■ 黄色LED灯:1 个■ 绿色LED灯:1 个■ 220欧电阻:3 个■ 面包板:1 个■ 多彩杜邦线:若干实验连线1.将3个发光二极管插入面包板,2.用杜邦线…...
Leetcode.1234 替换子串得到平衡字符串
题目链接 Leetcode.1234 替换子串得到平衡字符串 Rating : 1878 题目描述 有一个只含有 Q, W, E, R四种字符,且长度为 n 的字符串。 假如在该字符串中,这四个字符都恰好出现 n/4次,那么它就是一个「平衡字符串」。 给你一个这样…...
聚类算法之K-means算法详解
文章目录 什么是聚类k-means算法简介牧师-村民模型算法步骤伪代码流程描述手动实现优缺点优点缺点算法调优与改进数据预处理合理选择 K 值手肘法Gap Statistic(间隔统计量)轮廓系数法(Silhouette Coefficient)Canopy算法拍脑袋法采用核函数K-means++ISODATA参考文献<...
电话呼入/呼出CSFB流程介绍
MO CSFB 注册的LAI跟SYS_INFO不同会触发LU流程;LU流程结束后,判断LOCATION UPDATING ACCEPT消息中的"Follow-on proceed"参数状态。(1)如果IE消息中有"Follow-on proceed",终端直接发送CM Service Request; (2)如果IE消息中没有"Follow-on procee…...
【比赛合集】9场可报名的「创新应用」、「程序设计」大奖赛,任君挑选!
CompHub 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…)比赛。本账号同时会推送最新的比赛消息,欢迎关注!更多比赛信息见 CompHub主页 或 点击文末阅读原文以下信息仅供参考,以比赛官网为准目录创新应用赛&…...
观成科技:隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具,该工具基于TUN接口实现其功能,利用反向TCP/TLS连接建立一条隐蔽的通信信道,支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式,适应复杂网…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)
前言: 最近在做行为检测相关的模型,用的是时空图卷积网络(STGCN),但原有kinetic-400数据集数据质量较低,需要进行细粒度的标注,同时粗略搜了下已有开源工具基本都集中于图像分割这块,…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
招商蛇口 | 执笔CID,启幕低密生活新境
作为中国城市生长的力量,招商蛇口以“美好生活承载者”为使命,深耕全球111座城市,以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子,招商蛇口始终与城市发展同频共振,以建筑诠释对土地与生活的…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
