jQuery 如何实现一个滑动按钮开关
更新时间：2016年12月01日 14:27:29 作者：十年树木_2015
本文给大家分享一段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 =实现一个滑动按钮开关的功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
一个利用jquery写的左右轮播图，将jquery框架的链接跟图片替换就可以看到效果了,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了JQUERY实现网页右下角固定位置展开关闭特效的方法,涉及jquery操作页面元素的显示与隐藏等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
关于jQuery的DOM操作面试问题其实有很多，下面这篇文章主要给大家介绍了jQuery常见面试题之DOM操作的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
query formValidator插件非常好用，但是有一个严重的Bug，在使用ajax验证的时候，如果输入框的内容已经存在，把鼠标放到输入框，不做任何修改再离开，则会提示错误,很是郁闷2013-01-01
CSS伪元素不是DOM元素，因此你无法直接选择到它们。下面与大家分享两种不错的修改方法，需要的朋友可以参考下2014-07-07
下面小编就为大家带来一篇一个用jquery写的判断div滚动条到底部的方法【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-04-04
本文给大家收集了三种不同类型的jquery时间轴特效，涉及到jquer相关知识，对jquery时间轴特效感兴趣的朋友可以参考下本文2015-11-11
web开发中所有的输入控件中复选框和单选框的样式是最难去设计的，因为不同的浏览器及其操作系统对于样式的渲染展现是不一样的。2011-08-08
节点的删除在应用中比较常见，如何动态删除某一节点来实现某一特殊效果，下面有个不错的示例，希望对大家有所帮助2014-01-01
这篇文章主要介绍了jQuery中:radio选择器用法,实例分析了:radio选择器的功能、定义及匹配单选按钮的使用技巧,需要的朋友可以参考下2015-01-01
最新评论