页面效果：

这个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. 帝国cms“建立目录不成功，请检查目录权限”的解决方法

    就这个看似简单的问题我折腾了两天,百度看产生这个问题的原因有很多也很宽泛,大部分说的是初始化内置数据,但我出现“建立目录不成功,请检查目录权限”的原因估计只有少部分人会遇到. 内置初始化数据是你上传文 ...

  2. ubantu18.04 配置nginx与uwsgi(前后端分离)

    ubantu18.04 配置nginx与uwsgi   一.首先先安装nginx静态服务 先更新 sudo apt-get update 1.安装gcc g++的依赖库 sudo apt-get in ...

  3. Zuul + Ribbon 脱离Eureka完成负载均衡+重试机制

    Zuul + Ribbon 脱离Eureka完成负载均衡+重试机制 因为没有注册中心,所以需要网关对下游服务做负载均衡,然后果断集成Ribbon.中间遇到很多坑,最后终于解决了. 其实Ribbon里面 ...

  4. Mediawiki 子页链接无效的问题

    添加下面的配置到 LocalSettings.php 中即可: # Enable subpages in the main namespace $wgNamespacesWithSubpages[NS ...

  5. Reeds-Shepp曲线和Dubins曲线

    转载:https://www.cnblogs.com/huyanan/articles/6243694.html 什么是Reeds-Shepp曲线?       想象你下班开车回家,到了小区后想把车停 ...

  6. selenium网页截图和截图定位（无界面）phantomjs

    phantomjs是一款软件,需要重新安装. 参考: https://blog.csdn.net/liyahui_3163/article/details/79064108 案例代码: from se ...

  7. NORDIC BLE升级

    NRF52832 SDK15.3.0 概述: 所谓DFU(Device Firmware Update),就是设备固件升级的意思,而OTA是DFU的一种类型,准确说,OTA的全称应该是OTA DFU, ...

  8. VM虚拟机？

    虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统. 虚拟系统通过生成现有操作系统的全新虚拟镜像,它具有真实windows系统完全 ...

  9. D. Lakes in Berland (DFS或者BFS +连通块

    https://blog.csdn.net/guhaiteng/article/details/52730373 参考题解 http://codeforces.com/contest/723/prob ...

  10. Java 基础 - Collection集合通用方法及操作/ArrayList和LinkedList的差别优势 /弃用的Vector

    Collection的笔记: /**存储对象考虑使用: * 1.数组, ①一旦创建,其长度不可变!② 长度难于应对实际情况 * 2.Java集合, ①Collection集合: 1.set: 元素无序 ...