纯css实现switch开关

代码比较简单,有需要直接在下边粘贴使用吧~

html:

	<div class="switch-box"><input id="switch" type="checkbox"><label></label></div>

 css:

		.switch-box {position: relative;height: 25px;}.switch-box label {width: 50px;height: 25px;background: #ccc;position: relative;display: inline-block;border-radius: 46px;-webkit-transition: 0.4s;transition: 0.4s;}.switch-box label:after {content: '';position: absolute;width: 21px;height: 25px;border-radius: 100%;left: 0;top: -5px;z-index: 2;background: #fff;box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);-webkit-transition: 0.4s;transition: 0.4s;}.switch-box input {position: absolute;width: 100%;height: 100%;z-index: 5;opacity: 0;}.switch-box label:after {top: 0;width: 23px;height: 23px;margin: 1px 0;}.switch-box input:checked+label {background: #eb8597;}.switch-box input:checked+label:after {left: 30px;}

js:

  $('#switch').change(function (e) {var isChecked = $(this).prop("checked") ? true : false;if (isChecked) {console.log('选中...')} else {console.log('取消选中...')}});

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/810470.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C-开发 visual Studio扩展插件介绍-格式化插件Xaml Styler、CSharpier介绍(扩展插件安装方法)

C#开发 visual Studio扩展插件介绍 扩展插件安装方法Xaml StylerCSharpier 提高C#开发效率常用的插件 扩展插件安装方法 菜单栏点击“扩展”→“管理扩展”。 打开扩展页面 右上角搜索需要安装的插件&#xff0c;然后点击下载 安装完成后&#xff0c;根据提示关闭VS进行安…

记一次小郭被挖矿后的应急响应

谨以此篇纪念我第n1次被挖矿经历。 时间&#xff1a;2024年3月18日&#xff08;星期一&#xff09; 地点&#xff1a;阿里云服务器 响应&#xff1a;确认–>抑制–>消除–>恢复–>总结 确认阶段&#xff1a; 2024年3月18日星期一早上收到了阿里云的短信和邮件…

html+javascript,用date完成,距离某一天还有多少天

图片展示: html代码 如下: <style>* {margin: 0;padding: 0;}.time-item {width: 500px;height: 45px;margin: 0 auto;}.time-item strong {background: orange;color: #fff;line-height: 100px;font-size: 40px;font-family: Arial;padding: 0 10px;margin-right: 10px…

【hive】远程remote debug hive的方法,用于hive监听器/钩子编写

背景 写hive监听器时候需要拿到hive对象但hive是在集群linux主机上运行的。通过jdbc提交的sql具体执行过程不会再idea中运行。所以如果需要拿到hive对象有可能存在两个思路&#xff1a; &#xff08;1&#xff09;想办法写个钩子或者监听器&#xff0c;将需要的内容写成json字…

最简单的ubuntu安装docker教程

本文参考自docker官方教程&#xff1a;ubuntu上安装docker 一、安装Docker 第一步&#xff1a;添加Docker官方的GPG密钥 直接复制所有代码&#xff0c;作为一行运行即可 sudo apt-get update sudo apt-get install ca-certificates curl sudo install -m 0755 -d /etc/apt/k…

Python学习从0开始——项目一day01爬虫(二)

Python学习从0开始——项目一day01爬虫&#xff08;二&#xff09; 一、解析response数据二、json转换三、文件保存四、存储json对象五、完整代码 上一篇 一、解析response数据 在已经知道我们获取图片的最终URL存在于请求响应response中&#xff0c;下一步的重点就放在解析re…

Redis-底层数据结构

Redis-底层数据结构 redisObject对象机制对象共享引用计数以及对象的消毁 动态字符串SDS链表链表的优缺点: 压缩链表ziplist的缺点 字典-Dictrehash渐进式rehash 整数集-intSet内存分布图整数集合的升级 跳表 - ZSkipList快表-quicklistlistpack redisObject对象机制 typedef s…

DP10RF001一款200MHz~960MHz 低功耗(G)FSK/OOK无线收发芯片应用无线遥控工控设备无线门禁传感器等

产品概述 DP10RF001是一款工作于200MHz~960MHz范围内的低功耗、高性能、单片集成的(G)FSK/OOK无线收发机芯片。内部集成完整的射频接收机、射频发射机、频率综合器、调制解调器&#xff0c;只需配备简单、低成本的外围器件就可以获得良好的收发性能。芯片支持灵活可设的数据包…

Jmeter从数据为查找结果集数据方法随笔

一、Jmeter连接数据库 1.下载对应数据库的驱动包到jmeter安装目录的lib下ext文件中&#xff0c;并导入到jmeter的测试计划中&#xff0c;本实例中使用的是mysql如下所示&#xff1a; 点击测试计划–>点击浏览–>选中mysql驱动jar包–>打开 2.添加线程组&#xff0c;…

毕设(三)——nb-lot与onenet通信

文章目录 一、前言二、nb-lot与onenet的连接2.1 创建产品2.2 创建设备2.3 连接2.4 发送数据 三、onenet的数据可视化 刚刚看了一个关于nb-lot的视频&#xff0c;我看到up是用onenet原生的GUI就能做到数据的显示&#xff0c;十分亮眼 主要是它能把地图也一起显示出来&#xff0c…

2024mathorcup数学建模思路教学

大家好呀&#xff0c;认证杯数学建模开始了&#xff0c;来说一下选题建议以及思路吧&#xff1a; 首先定下主基调&#xff0c; 本次mathorcup数学应用挑战赛推荐大家选择C题&#xff0c;难度方面&#xff1a;A≈B&#xff1e;D&#xff1e;C。 我们预计4.13日晚上前更新完毕…

Stable Diffusion 本地部署教程:详细步骤与常见问题解析

作为一位热衷于探索前沿AI技术的博主&#xff0c;近期我深度研究了Stable Diffusion模型的本地部署过程。在这篇教程中&#xff0c;我将详述从环境准备到模型运行的每个步骤&#xff0c;并针对常见的部署问题给出解决方案&#xff0c;帮助你顺利在本地开启Stable Diffusion的创…

【图像处理】-小议YUV色彩空间-YUV和RGB格式的来由,相互关系以及转换方式,并对编程实现的YUV转为RGB程序进行介绍

小议YUV色彩空间 摘要: 在视频图像处理等相关相关领域&#xff0c;YUV是一个经常出现的格式。本文主要以图解的资料形式详细描述YUV和RGB格式的来由&#xff0c;相互关系以及转换方式&#xff0c;并对编程实现的YUV转为RGB程序进行介绍。 1 引言 自然界的颜色千变万化&#xff…

【前缀合】Leetcode 和可被 K 整除的子数组

题目解析 974. 和可被 K 整除的子数组 算法讲解 前置知识点&#xff1a; 同余定理&#xff1a;(ab) % c 0 可以得出 a % c b % cC中负数求余的结果是负数&#xff0c;但是本题需要的是正数&#xff0c;所以我们为了修正这个结果&#xff0c;需要进行(负数 % 正数 正数) %…

无法用raven-js,如何直接使用TraceKit标准化错误字符串(一次有趣的探索)

引子&#xff1a;网上三年前&#xff08;2020&#xff09;的文章介绍了一个raven-js 简单说就是把堆栈信息格式化兼容各浏览器&#xff0c;便于查看错误来源。 **but&#xff1a;**到处找了一下raven-js&#xff0c;已经没有官方出处了&#xff0c;只在Sentry的源码仓库里发现…

【数据结构】单链表(二)

目录 1.查找数据 2.指定位置插入和删除节点 2.1 指定位置之前插入节点 2.2 指定位置之后插入节点 2.3 删除指定位置节点 2.4 删除指定位置之后的节点 3.销毁链表 我们接着上一篇【数据结构】单链表&#xff08;一&#xff09;-CSDN博客 来继续实现单链表 1.查找数据 在…

2. 如何让mybatis-plus的逻辑删除注解@TableLogic临时失效

文章目录 如何让mybatis-plus的逻辑删除注解TableLogic临时失效1. 场景复现1.1 controller代码1.2 service层代码1.3 entity代码 2. 问题分析3. 解决方案3.1 说明3.2 核心代码3.3 service方法对应修改为3.4 运行结果 如何让mybatis-plus的逻辑删除注解TableLogic临时失效 1. 场…

【QT教程】QT6 QML界面布局艺术

QT6 QML界面布局艺术 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C扩展开发视频课程 免费QT视频课程 您可以看免费1000个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费看…

7、configMap

1、configMap是什么 类似与pod的配置中心&#xff0c;不会因为pod的创建销毁&#xff0c;相关配置发生改变 pod定义硬编码意味着需要有效区分⽣产环境与开发过程中的pod 定义。为了能在多个环境下复⽤pod的定义&#xff0c;需要将配置从pod定义描 述中解耦出来。 2、向容器中…

Mongodb入门--头歌实验MongoDB 文档的高级查询操作

数据库存储了大量的数据&#xff0c;当我们需要特定的数据时就要使用查询方法&#xff0c;根据一定的条件&#xff0c;筛选出我们想要的数据&#xff0c;前一章我们简单介绍了条件操作符&#xff08;<、<、>、>、!等&#xff09;&#xff0c;在这一章中我们将更全面…