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 =实现一个滑动按钮开关的功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jQuery+PHP打造滑动开关效果

    jQuery+PHP打造滑动开关效果

    本文介绍了使用jQuery.PHP和MySQL实现类似360安全卫士防火墙开启关闭的开关,可以将此功能应用在产品功能的开启和关闭功能上. 准备工作为了更好的演示本例,我们需要一个数据表,记录需要的功能说明及开启状态,表结构如下: 复制代码 代码如下: CREATE TABLE `pro` (    `id` int(11) NOT NULL auto_increment,    `title` varchar(50) NOT NULL,    `description` varchar(200)

  • jQuery控制的不同方向的滑动(向左、向右滑动等)

    引入jquery.js,复制以下代码,即可运行. <style type="text/css"> .slide { position: relative; height: 200; lightyellow; } .slide .inner { position: absolute; left: 0; bottom: 0; height: 100; lightblue; width: 100% } </style> 1.slidetoggle() 交替slided

  • 用jquery写的菜单从左往右滑动出现

    用jquery写的菜单从左往右滑动出现

    最近,刚好在研究微网站的制作,查阅了大量的资料都是关于微信3平台开发教程,几乎没有这类的介绍,不过都是第三方平台提供模板制作微站而已,后来很感谢柳峰博客最后写的微网站的解惑, "什么是微网站? 微网站是新瓶装老酒,被一些搞营销的人给神化了,以至于很多开发者都在问什么是微网站,如何开发微网站.微网站本质上就是以微信浏览器为入口的手机网站(Web APP),能够兼容Android.iOS.WP等操作系统.开发微网站用到的技术与开发普通网站一样,都是基于HTML(HTML5).CSS.Javascri

  • 基于jquery的横向滚动条（滑动条）

    查找了很多方法,有些不能实现(被滚动内容的宽度未知,但使用这种方法必须已知),其它的不能完全兼容这些浏览器(IE6,Firefox,Chrome).最后决定使用JQuery的Slider控件. 1. 下载jquery-1.3.2.min.js,jquery-ui-1.7.1.custom.min.js 2. Html 复制代码 代码如下: <div id="topslider" runat="server"></div> <div id

  • jquery实现左右滑动菜单效果代码

    jquery实现左右滑动菜单效果代码

    本文实例讲述了jquery实现左右滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了三种背景颜色左右滑动jquery菜单导航效果,IE下有问题,本菜单使用了CSS3的部分属性,因此建议使用火狐或Chrome等浏览器获取最佳效果.当把鼠标移到菜单上的时候,对应菜单项的背景会变化,而且本菜单具有圆角的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-move-style-menu-codes/ 具

  • jquery实现上下左右滑动的方法

    本文实例讲述了jquery实现上下左右滑动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • 利用jQuery实现滑动开关按钮效果（附demo源码下载）

    利用jQuery实现滑动开关按钮效果（附demo源码下载）

    首先来看看要实现的效果图: HTML结构如下: <div class="boxwrap fr"><!--容器 开始--> <div class="switchBox fl" id="timeList" typeId="time"> <table cellpadding="0" cellspacing="0"> <tr> <

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

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

    滑动开关按钮大家在各大网站都能见到,下面小编给大家分享一篇基于jquery实现的一个滑动按钮开关效果,感兴趣的朋友可以参考下实现代码. 先给大家展示下效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery做的滑动按钮开关</title> <link rel="sty

  • JQuery实现鼠标滚轮滑动到页面节点

    JQuery实现鼠标滚轮滑动到页面节点

    下面通过一段JQuery代码实现鼠标滚轮滑动到页面节点的详细介绍,并通过展示效果图展示给大家. 基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 实现的代码. html代码: <section class="panel home" data-section-name="home"> <div class="inner"> <h

  • jQuery实现MSN中文网滑动Tab菜单效果代码

    jQuery实现MSN中文网滑动Tab菜单效果代码

    本文实例讲述了jQuery实现MSN中文网滑动Tab菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现Msn中文网的滑动滑动门代码,利用jQuery实现的效果,代码很巧妙,就是利用一个绝对定位的层来实现移动效果,但是体验度大幅提升了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-msn-tab-menu-style-codes/ 具体代码如下: <!DOCTYPE html> <html>

  • 40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一

    40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一

    以其语法简单灵活而大受Web designer欢迎.所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果.从这篇文章开始到接下来的几篇文章我们将向大家分享40多种非常有用,又有创意的jQuery图片滑动插件,及其演示和下载地址.你可以按你网页风格找到合适的jQuery图片滑动插件,然后点击演示链接查看具体效果,然后下载此jQuery滑动插件.希望你能在这40个jQuery

  • jquery手机触屏滑动拼音字母城市选择器的实例代码

    今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src="images/dizhi.png" alt=""><em>北京</em></div> <!--省份列表--> <div class="dzhc_xs"> <nav> <di

  • jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n

  • jQuery实现的经典滑动门效果

    jQuery实现的经典滑动门效果

    本文实例讲述了jQuery实现的经典滑动门效果.分享给大家供大家参考.具体如下: 这是一款jQuery 滑动门,从样式上来说,虽然有些古板,但已经具备了经典的滑动门功能,感兴趣的朋友可以继续美化一下界面. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-jd-hd-move-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

  • jQuery层动画定位滑动效果的方法

    本文实例讲述了jQuery层动画定位滑动效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • jquery实现相册一下滑动两次的方法

    本文实例讲述了jquery实现相册一下滑动两次的方法.分享给大家供大家参考.具体实现方法如下: var t1=null; //定义为全局变量 $('body').on('touchstart', '#gallerySlider img', function(e){ var touch = e.originalEvent, startX = touch.changedTouches[0].pageX; if (t1 == null){ t1 = new Date().getTime(); }els

  • jQuery插件开发精品教程(让你的jQuery更上一个台阶)

    jQuery插件开发精品教程(让你的jQuery更上一个台阶)

    刘哇勇的部落格要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发

随机推荐