<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery做的滑动按钮开关</title>
    <link rel="stylesheet" type="text/css" href="css/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="js/jquery.min.js"></script>
<script type="text/javascript" src="js/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>

jquery做的滑动按钮开关的更多相关文章

  1. Jquery实现特效滑动菜单栏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

  3. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  4. jquery mobile左右滑动切换页面

    jquery mobile左右滑动切换页面 $(function() {$("body").bind('swiperight', function() {  $.mobile.ch ...

  5. 用Jquery做一个时间日期选择器

    今天我们就用Jquery做一个时间日期选择器,当打开网页时,文本框里面显示的是当前的日期,点击文本框可以出现年.月.日的下拉菜单,并且可以选择,会根据年份的选择判断是否是闰年,从而改变二月的天数,闰年 ...

  6. 简单的用jQuery做遮罩效果

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  7. 基于jQuery鼠标滚轮滑动到页面节点部分

    基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  8. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  9. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

随机推荐

  1. 3-mybatis-xml配置

    配置文件主要在官网文档是已有详细说明. 1  properties 在上一节中已经有说明. 2 settings MyBatis中的调整设置. <settings> <!--全局地开 ...

  2. HAproxy负载均衡-ACL篇（转） blog.csdn.net/tantexian

    ACL定制法则: 开放策略:拒绝所有,只开放已知 拒绝策略:允许所有,只拒绝某些 事实上实现安全策略,无非也就是以上两种方法 redirect 参考:http://cbonte.github.io/h ...

  3. Windows安装使用npm（Nodejs）

    转载参考:https://blog.csdn.net/han0373/article/details/80606487 1:下载 https://nodejs.org/en/ 2:查看是否安装成功 w ...

  4. Using Android monkeyrunner from Eclipse, both in Windows and Linux!

    This time I want to use English to make this article useful for all others in the world:) As you kno ...

  5. [iOS]UIWebView返回和NSURLErrorDomain-999

    1.UIWebView实现返回不崩溃: -(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)r ...

  6. Appium，AirTest切换使用时，appium罢工之坑(1)

    由于一些元素不能定位,所以最近项目引用了Airtest 问题场景: case的开始使用appium,case执行过程中,切换到airtest操作元素,待执行完airtest相关步骤之后,后续使用app ...

  7. HCL试验5

    PC端配置:配置ip地址 交换机1配置:①创建VLAN system-view vlan 10 vlan 20 ②配置PC端接口 interface gi 1/0/1 port link-type a ...

  8. vim简单题练习-------出自《鸟哥的linux私房菜》第309页码题目

    用vim打开文件,在第34行向右移动15字符,怎么做? 34G 15->或者15j 如何到达文件的页首或者页尾? 1G或者gg G 如何在光标所在行中,移动到行头及行尾? home end vi ...

  9. 获取JSON中所有的KEY

    采用递归的方式,遍历JSON中所有的KEY. JSON格式如下: {"username":"tom","age":18,"addr ...

  10. MVC与MTV模型及Django请求的生命周期

    MVC模型 MVC:Model View Controller M: 模型.是应用程序中用于处理应用程序数据逻辑的部分 V:视图.是应用程序汇总处理数据显示的部分 C:控制器.是应用程序中处理用户交互 ...