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 相关文章推荐
window.name代替cookie的实现代码
Nov 28 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
有趣的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存储过程调用实例代码
2013/02/03 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
php中smarty区域循环的方法
2015/06/11 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
JS 跳转页面延迟2种方法
2013/03/29 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
Python中type的构造函数参数含义说明
2015/06/21 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Python range与enumerate函数区别解析
2020/02/28 Python
灵泰克Java笔试题
2016/01/09 面试题
小学安全教育材料
2014/02/17 职场文书
上学路上观后感
2015/06/16 职场文书
诚信教育主题班会
2015/08/13 职场文书
导游词之贵州织金洞
2019/10/12 职场文书