页面效果：

这个switch使用纯CSS实现，小巧简单

css代码

/* switch */

/* 开关样式 */

label.bui-switch-label .bui-switch {

    width: 50px;

    height: 25px;

    position: relative;

    border: 1px solid #dfdfdf;

    background-color: #fdfdfd;

    box-shadow: #dfdfdf 0 0 0 0 inset;

    border-radius: 20px;

    border-top-left-radius: 20px;

    border-top-right-radius: 20px;

    border-bottom-left-radius: 20px;

    border-bottom-right-radius: 20px;

    background-clip: content-box;

    display: inline-block;

    -webkit-appearance: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    outline: none;

}

/* 滑块样式 */

label.bui-switch-label .bui-switch:before {

    content: '';

    width: 23px;

    height: 24px;

    position: absolute;

    top: 0px;

    left: 1px;

    border-radius: 20px;

    border-top-left-radius: 20px;

    border-top-right-radius: 20px;

    border-bottom-left-radius: 20px;

    border-bottom-right-radius: 20px;

    background-color: #fff;

    box-shadow: 0 1px 3px rgba(0,0,0,0.4);

}

/* 滑块向右移动距离 */

label.bui-switch-label input:checked + .bui-switch:before {

	left:27px;

}

/* 隐藏原生checkbox */

label.bui-switch-label input {

	position:absolute;

	opacity:0;

	visibility:hidden;

}

/* 滑块向右移动动画 */

label.bui-switch-label.bui-switch-animbg .bui-switch:before {

	-webkit-transition:left 0.3s;

	transition:left 0.3s;

}

/* 滑块向右移动 开关颜色动画 */

label.bui-switch-label.bui-switch-animbg input:checked + .bui-switch {

	box-shadow:#dfdfdf 0 0 0 0 inset;

	background-color:#64bd63;

	-webkit-transition:border-color 0.4s,background-color ease 0.4s;

	transition:border-color 0.4s,background-color ease 0.4s;

}

　　

html

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>switch开关按钮</title>

<link rel="stylesheet" type="text/css" href="switch.css">

<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

</head>

<body>

<div style="border:4px dashed #ccc;text-align:center;height:200px;margin:50px auto;">

	<br>

	<strong>简单的背景动画：</strong>

	<br><br><br>

	<label class="bui-switch-label bui-switch-animbg">

		<input type="checkbox" name="s"><i class="bui-switch"></i>

		<span style="font-size:18px;margin:10px 10px;top:-7px;position:relative;">下次自动登录</span>

	</label>

</div>

<script>

	$("input").click(function(data){

		//获取switch的值

		var ck=$("input[name='s']:checked").length>0?true:false;

		if(ck){

			console.log("switch on ");

		}else{

			console.log("switch off ");

		}

	})

</script>

</body>

</html>

　　

switch开关的值

var ck=$("input[name='s']:checked").length>0?true:false;

　　

这里用到了jquery去获取checkbox的值

改进一下：那就是使用原生的js去操作:

//添加监听

document.getElementById('s').addEventListener("click",function(event){

	//获取switch的值

	var ck=document.querySelector("input[name='s']:checked")==null?true:false;

	console.log(ck);

});

html

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>switch开关按钮</title>

<link rel="stylesheet" type="text/css" href="switch.css">

</head>

<body>

<div style="border:4px dashed #ccc;text-align:center;height:200px;margin:50px auto;">

	<br>

	<strong>简单的背景动画：</strong>

	<br><br><br>

	<label class="bui-switch-label bui-switch-animbg">

		<input type="checkbox" name="s" id="s"><i class="bui-switch"></i>

		<span style="font-size:18px;margin:10px 10px;top:-7px;position:relative;">下次自动登录</span>

	</label>

</div>

<script>

	document.getElementById('s').addEventListener("click",function(event){

		//获取switch的值

		var ck=document.querySelector("input[name='s']:checked")==null?true:false;

		console.log(ck);

	});

</script>

</body>

</html>

　　

页面效果：

ok，欢迎转载~

喜欢的话，点个赞吧！

简单的switch插件的更多相关文章

  1. 【UI插件】简单的日历插件（下）—— 学习MVC思想

    前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...

  2. Awesomplete - 零依赖的简单自动完成插件

    Awesomplete 是一款超轻量级的,可定制的,简单的自动完成插件,零依赖,使用现代化标准构建.你可以简单地添加 awesomplete 样式,让它自动处理(你仍然可以通过指定 HTML 属性配置 ...

  3. 接口测试从未如此简单 - Postman (Chrome插件)

    接口测试从未如此简单 - Postman (Chrome插件) 一个非常有力的Http Client工具用来测试Web服务的, 我这里来介绍如何用它测试restful web service 注:转载 ...

  4. 编写一个简单的Jquery插件

    1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...

  5. NSIS：简单按钮美化插件SkinButton，支持透明PNG图片。

    原文 NSIS:简单按钮美化插件SkinButton,支持透明PNG图片. 征得作者贾可的同意,特发布按钮美化插件SkinButton. 插件说明: 使用GDI+库写的一个简单按钮美化插件,支持透明P ...

  6. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

  7. 实现一个简单的Vue插件

    我们先看官方文档对插件的描述 插件通常会为 Vue 添加全局功能.插件的范围没有限制--一般有下面几种: 1.添加全局方法或者属性,如: vue-custom-element 2.添加全局资源:指令/ ...

  8. 使用jQuery.extend创建一个简单的选项卡插件

    选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...

  9. XMPP即时通讯协议使用（五）——搭建简单的Openfire插件

    前言 在开发Openfire插件前需要构建完成服务器源码编辑环境,具体操作步骤请参照Openfire服务器源码编译的了解. 开发简单的Openfire插件 1.已构建完成的Openfire源码结构如下 ...

随机推荐

  1. 前端开发 Vue -3axios

    Axios是什么? 应该念“阿克希奥斯”……但是太长太拗口,我一般念“阿笑斯”…… Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get.post请求.说到get.po ...

  2. 分布式事务（ACID特性、CAP定律）

    普通事务和分布式事务的区别: 普通事务就是一般所说的数据库事务,事务是数据库管理系统执行过程中的一个逻辑单位,由一个有限的数据库操作序列构成.当事务被提交给了DBMS(数据库管理系统),则DBMS(数 ...

  3. POJ1988(Cube Stacking)--并查集

    题目链接:http://poj.org/problem?id=1988 题意:有n个元素,开始每个元素各自在一个栈中,有两种操作,将含有元素x的栈放在含有y的栈的顶端,合并为一个栈. 第二种操作是询问 ...

  4. VBA连接操作符

    VBA支持以下连接运算符. 假设变量A=5,变量B=10,则 - 运算符 描述 示例 + 将两个值添加为变量,其值是数字 A + B = 15 & 连接两个值 A & B = 510 ...

  5. VBA宏注释（四）

    注释用于记录程序逻辑和用户信息,其他程序员将来可以阅读并理解相同的代码无缝工作. 它包括由开发者,修改者以及还可以包括合并逻辑的信息. 解释器在执行时忽略注释. VBA中的注释用两种方法表示,它们分别 ...

  6. layui下拉多选formSelects使用方法

    下载formSelects-v4插件(引入formSelects-v4.css和formSelects-v4.js) 下载地址:https://fly.layui.com/extend/formSel ...

  7. 【转载】salesforce 零基础开发入门学习（六）简单的数据增删改查页面的构建

    salesforce 零基础开发入门学习(六)简单的数据增删改查页面的构建   VisualForce封装了很多的标签用来进行页面设计,本篇主要讲述简单的页面增删改查.使用的内容和设计到前台页面使用的 ...

  8. Kmalloc可以申请的最大内存

    Kmalloc申请的最大内存 以前虽然读过源码,但是对于它的申请上限确实没注意过.下面分析下,下面是kmalloc的源码. 可以看出,如果想知道kmalloc能申请的范围,需要跳转到<linux ...

  9. ASE19团队项目 beta阶段 model组 scrum report list

    scrum 1 scrum 2 scrum 3 scrum 4 scrum 5 scrum 6 scrum 7

  10. apidoc 工具的使用

    使用rest framerok时,需要写API接口文档,此时就需要用到 apidoc(个人觉得这个用的比较顺手) 需要安装nodejs,,, windows 下 1 然后验证是否安装成功  node ...