页面效果：

这个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. office2016激活码 最新各个版本 激活

    office2016专业版激活密钥 Microsoft Office 2016 Pro Plus Retail 零售版序列号密钥: BHXN7-MQB36-MTHQ4-8MHKV-CYT97 Micr ...

  2. XML和JSON序列化以及反序列化

    1.将文件保存序列化至文档中,然后再读取: //首先创建可序列化的实体类 [Serializable] public class Message { public string Name { get; ...

  3. 一篇文章彻底搞懂异步，同步，setTimeout，Promise，async

    之前翻看别的大佬的博客看到了关于setTimeout,promise还有async执行顺序的文章.观看了几篇之后还是没有怎么看懂,于是自己开始分析代码,并整理了此文章,我相信通过此文章朋友们能对异步同 ...

  4. Linq to sql之left join运用示例

    示例一: var l= from a in cardsBll.GetCards() join b in usersBll.GetAllUsers() on a.CardSn equals b.Card ...

  5. SQL递归查询(with as)

    SQL递归查询(with cte as) with cte as(    select Id,Pid,DeptName,0 as lvl from Department    where Id = 2 ...

  6. 认识：before和：after伪类

    有时候,我们需要大量的重复代码去实现一个非常简单的功能,这不仅浪费时间,而且效率低下,例如: <div class="aa">你好</div><div ...

  7. The openssl extension is missing, which means that secure HTTPS transfers are impossible

    执行命令:curl -sS https://getcomposer.org/installer | php报错如下Some settings on your machine make Composer ...

  8. Netty4实现JTT809对接

    网上的使用的netty版本过老,最近自己接触到这一块,重新写了一个 服务器流程 1,判定报文起始和结束标识 ,2去掉头尾标识进行转义,3,去掉CRC码进行CRC计算,4读取报文头,(5,如果加密则解密 ...

  9. docker在Windows环境下的安装

    Windows环境下安装 docker有两种安装包 一.Docker for Windows(目前只能在 64 位的 Windows10 专业版.企业版.教育版下才能安装) 二.Docker Tool ...

  10. 爬虫部署 --- scrapyd部署爬虫 + Gerapy 管理界面 scrapyd+gerapy部署流程

    ---------scrapyd部署爬虫---------------1.编写爬虫2.部署环境pip install scrapyd pip install scrapyd-client 启动scra ...