纯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.rhkb.cn/news/310494.html

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

相关文章

C++ 封装

1.封装 cpp认为万事万物都可以封装 封装将属性和行为作为一个整体&#xff0c;表现生活中的事物。 将属性和行为加以权限控制。 语法&#xff1a; class 类名{ 访问权限: 属性或者行为 } //学生类 class Student { public:void setName(string name) {m_name name;}vo…

已经下载了pytorch,但在正确使用一段时间后出现No module named torch的错误

问题描述 使用的是叫做m2release的虚拟环境&#xff0c;在此环境下使用conda list可以发现是存在pytorch的&#xff0c;但是运行代码时却报No module named torch的错误。 解决方案 想尝试卸掉这个pytorch重新装一次&#xff0c;但是想卸载会提示找不到&#xff0c;想重新…

经典问题解答(顺序表)

问题一&#xff1a;移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不…

【SQL】DISTINCT GROUP BY

找到所有办公室里的所有角色&#xff08;包含没有雇员的&#xff09;,并做唯一输出(DISTINCT) 用DISTINCT : SELECT DISTINCT B.Building_name,E.Role FROM Buildings B LEFT JOIN Employees EON B.Building_name E.Building需要找到的结果&#xff1a;所有办公室名字&#…

计算机网络(三)数据链路层

数据链路层 基本概念 数据链路层功能&#xff1a; 在物理层提供服务的基础上向网络层提供服务&#xff0c;主要作用是加强物理层传输原始比特流的功能&#xff0c;将物理层提供的可能出错的物理连接改在为逻辑上无差错的数据链路&#xff0c;使之对网络层表现为一条无差错的…

ZISUOJ 数据结构-栈

题目列表&#xff1a; 问题 A: 数据结构-栈-括号匹配 思路&#xff1a; 遇到左半边括号&#xff0c;将其入栈&#xff0c;遇到右半边括号&#xff0c;则先判断栈是否为空&#xff0c;若为空&#xff0c;则匹配失败&#xff0c;若不为空&#xff0c;则再判断栈顶元素是否是与之匹…

HBase2.x学习笔记

文章目录 一、HBase 简介1、HBase 定义1.1 概述1.2 HBase 与 Hadoop 的关系1.3 RDBMS 与 HBase 的对比1.4 HBase 特征简要 2、HBase 数据模型2.1 HBase 逻辑结构2.2 HBase 物理存储结构2.3 HBase的表数据模型 3、HBase 基本架构3.1 Master3.2 Region Server3.3 Zookeeper3.4 HD…

Python进阶编程 --- 2.MySQL、pymysql、PySpark

文章目录 第一章&#xff1a;SQL基础入门1.1 数据库数据库如何存储数据 1.2 数据库和SQL的关系1.3 MySQL版本1.4 命令提示符内使用MySQL1.5 SQL概述1.5.1 SQL语言分类1.5.2 SQL语言特性 1.6 DDL库管理表管理 1.7 DML - 数据操作1.8 DQL - 查询和计算数据1.8.1 基础数据查询1.8.…

gitlab(docker)安装及使用

GitLab GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的Web服务。 下载(docker) 查询docker镜像gitlab-ce gitlab-ce是它的社区版 [rootlocalhost ~]# docker search gitlab-ce NAME …

《Kubernets证书篇:基于Kylin V10+ARM架构CPU修改K8S 1.26.15版本证书时间限制》

一、背景 Kubernetes 默认的证书有效期只有1年&#xff0c;因此需要每年手动更新一次节点上面的证书&#xff0c;特别麻烦而且更新过程中可能会出现问题&#xff0c;因此我们要对 Kubernetes 的 SSL 证书有效期进行修改&#xff0c;这里将证书的时间限制修改为100年。 环境信息…

快速掌握Spring监控(Spring Boot admin)

监控 监控可视化监控平台Admin底层逻辑info 自定义端点 监控 监控的作用&#xff1a; 监控服务状态是否宕机监控服务运行指标&#xff08;内存&#xff0c;虚拟机&#xff0c;线程&#xff0c;请求等&#xff09;监控日志管理服务&#xff08;服务下线&#xff09; 监控的实…

【Linux】磁盘管理和文件系统

目录 一、硬盘 1.硬盘结构 2.结构类型 二、MBR与磁盘分区 1.MBR主引导记录 2.磁盘分区结构 三、文件系统类型 四、linux系统添加并使用新硬盘的步骤 1.添加新的硬盘 2.刷新识别 3.进行分区 4.格式化&#xff0c;创建文件系统 5.挂载使用 一、硬盘 1.硬盘结构…

部署项目的时候的一些错误

项目打jar包&#xff0c;找不到资源&#xff0c;连接不上数据库 项目打包后无法运行 直接在idea运行可以 解决方法&#xff1a;pom文件中增加&#xff08;配置文件如果是yml&#xff0c;写yml&#xff09; <resources><resource><directory>src/main/java&…

物联网的核心价值是什么?——青创智通

工业物联网解决方案-工业IOT-青创智通 物联网&#xff0c;这个词汇在当今的科技领域已经变得耳熟能详。但当我们深入探索物联网的核心价值时&#xff0c;我们会发现它远不止是一个简单的技术概念&#xff0c;而是一种能够彻底改变我们生活方式和工作方式的革命性力量。 物联网…

Niobe WiFi IoT开发板OpenHarmony内核编程开发——message

本示例将演示如何在Niobe WiFi IoT开发板上使用cmsis 2.0 接口进行消息队列开发 message API分析 osThreadNew() osThreadId_t osThreadNew(osThreadFunc_t func, void *argument,const osThreadAttr_t *attr )描述&#xff1a; 函数osThreadNew通过将线程添加到活动线程列表…

游戏生成式 AI:编织梦想,避开阴影

想象一下&#xff0c;一个沉浸式的游戏世界中玩家遇到的每个 NPC 都由 AI 驱动&#xff0c;他们能与玩家进行互动&#xff0c;从改变游戏体验。据 Inword 一项研究显示&#xff0c;绝大多数游戏玩家渴望这种互动&#xff0c;愿意投入更多的时间和金钱来玩这种由 AI 驱动的游戏。…

ActiveMQ主从架构和集群架构的介绍及搭建

一、主从和集群架构的特点 1.1 主从架构的-Master/slave模式特点 读写分离&#xff0c;纵向扩展&#xff0c;所有的写操作一般在master上完成&#xff0c;slave只提供一个热备 1.2 集群架构-Cluster模式特点 分布式的一种存储&#xff0c;水平的扩展&#xff0c;消息的分布…

idm线程越多越好吗 idm线程数多少合适 IDM百度云下载 IDM下载器如何修改线程数

IDM&#xff08;Internet Download Manager&#xff09;是一款流行的网络下载器&#xff0c;它支持多线程下载&#xff0c;这意味着它可以同时建立多个连接来下载文件的不同部分&#xff0c;从而提高下载速度。我们在使用IDM的时候总是有很多疑问&#xff0c;今天我们学习IDM线…

STM32H7上实现AD5758驱动

目录 概述 1 下载ADI 5758 Demo 2 AD5758驱动的移植 2.1 使用STM32CubeMX创建工程 2.2 接口函数实现 2.2.1 驱动接口列表 2.2.2 函数实现 2.2.3 修正ad5758驱动 3 AD5758应用程序 3.1 编写测试程序 3.1.1 配置参数结构 3.1.2 配置参数函数 3.1.3 读取参数函数 3.…

docker-compose部署RabbitMQ(一步到位)

docker-compose如下 version: 3.1 services:rabbitmq:restart: alwaysimage: rabbitmq:managementcontainer_name: rabbitmqhostname: rabbitports:- 5672:5672- 15672:15672environment:TZ: Asia/ShanghaiRABBITMQ_DEFAULT_USER: rabbitRABBITMQ_DEFAULT_PASS: 123456volumes…