jQuery 如何实现一个滑动按钮开关


Posted in Javascript onDecember 01, 2016

滑动开关按钮大家在各大网站都能见到,下面小编给大家分享一篇基于jquery实现的一个滑动按钮开关效果,感兴趣的朋友可以参考下实现代码。

先给大家展示下效果图:

jQuery 如何实现一个滑动按钮开关

代码:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>jquery做的滑动按钮开关</title> 
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"/> 
</head> 
<style> 
.switch{ 
width: 100px; 
margin: 100px 0px 0 100px; 
} 
.btn_fath{ 
margin-top: 10px; 
position: relative; 
border-radius: 20px; 
} 
.btn1{ 
float: left; 
} 
.btn2{ 
float: right; 
} 
.btnSwitch{ 
height: 40px; 
width: 50px; 
border:none; 
color: #fff; 
line-height: 40px; 
font-size: 16px; 
text-align: center; 
z-index: 1; 
} 
.move{ 
z-index: 100; 
width: 40px; 
border-radius: 20px; 
height: 40px; 
position: absolute; 
cursor: pointer; 
border: 1px solid #828282; 
background-color: #f1eff0; 
box-shadow: 1px 2px 2px 1px #fff inset,0 0 5px 1px #999; 
} 
.on .move{ 
left: 60px; 
} 
.on.btn_fath{ 
background-color: #5281cd; 
} 
.off.btn_fath{ 
background-color: #828282; 
} 
</style> 
<body> 
<div class="switch"> 
<div class="btn_fath clearfix on" onclick="toogle(this)"> 
<div class="move" data-state="on"></div> 
<div class="btnSwitch btn1">ON</div> 
<div class="btnSwitch btn2 ">OFF</div> 
</div> 
<div class="btn_fath clearfix off" onclick="toogle(this)"> 
<div class="move" data-state="off"></div> 
<div class="btnSwitch btn1">ON</div> 
<div class="btnSwitch btn2 ">OFF</div> 
</div> 
</div> 
<script type="text/javascript" src="jquery/jquery.min.js"></script> 
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> 
<script type="text/javascript"> 
function toogle(th){ 
var ele = $(th).children(".move"); 
if(ele.attr("data-state") == "on"){ 
ele.animate({left: "0"}, 300, function(){ 
ele.attr("data-state", "off"); 
alert("关!"); 
}); 
$(th).removeClass("on").addClass("off"); 
}else if(ele.attr("data-state") == "off"){ 
ele.animate({left: '60px'}, 300, function(){ 
$(this).attr("data-state", "on"); 
alert("开!"); 
}); 
$(th).removeClass("off").addClass("on"); 
} 
} 
</script> 
</body> 
</html>

需要注意的是:

1、这边滑动使用的速度是300ms,好像是匀速,没有线性的快慢那种;试着找下能不能像CSS3中ease那种线性运动的。

2、animate方法中的回调函数,即运动结束后调用的function。

以上所述是小编给大家介绍的jQuery =实现一个滑动按钮开关的功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
关于延迟加载JavaScript
May 05 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
实例教学如何写vue插件
Nov 30 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
有趣的bootstrap走动进度条
Dec 01 #Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 #Javascript
第一次接触神奇的前端框架vue.js
Dec 01 #Javascript
bootstrapValidator自定验证方法写法
Dec 01 #Javascript
jQuery生成假加载动画效果
Dec 01 #Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 #Javascript
浅谈js键盘事件全面控制
Dec 01 #Javascript
You might like
PHP Socket 编程
2010/04/09 PHP
php根据年月获取季度的方法
2014/03/31 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
圣诞节红领巾广播稿
2014/02/03 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
被告答辩状范文
2015/05/22 职场文书
长征观后感
2015/06/09 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android
python 学习GCN图卷积神经网络
2022/05/11 Python