1. <!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;
        }
  2.  
  3.     .btn1{
            float: left;
        }
  4.  
  5.     .btn2{
            float: right;
        }
        .btnSwitch{
            height: 40px;
            width: 50px;
            border:none;
            color: #fff;
            line-height: 40px;
            font-size: 16px;
            text-align: center;
            z-index: 1;
        }
  6.  
  7.     .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>
  8.  
  9.     <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>
  10.  
  11. <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. react native tap切换页面卡顿

    问题描述:做一个页面,左边是导航,每次点击一个菜单,右边立即显示出对应的视图,数据会重新过滤,使用setState 更新视图,会卡顿 解决办法: InteractionManager.runAfter ...

  2. Helm chart仓库官方仓库不能使用解决方法

    Helm chart仓库官方仓库不能使用解决方法 k8s中的官方helm chart仓库在国内可能使用不了,但是我们又需要使用,这里推荐几个方法. 使用其他的chart仓库 微软的chart仓库 ht ...

  3. Very important notes about Spring @Transnational(Srping事务注解 @Transnational重要注意事项）

    Sprint @Transnational is being ignored in the following cases: 1. when the caller method is calling ...

  4. C/C++之编程语言学习资源

    前言 因朋友相问,藉以帮助需要学习C.C++语言的后来小伙伴. 网络视频资源 选择其中一系列即可,切忌贪多嚼不烂. [系列1:可能会面临开课时间错过的问题,二门课程只要能上其一即可,均为浙大翁恺老师的 ...

  5. webrtc实现点对点视频通讯

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

  6. H5本地存储技术

    H5 Web存储技术 前言 web存储技术在初期的时候被定义为HTML5的一部分作为其API.后来被独立出来作为一份独立的标准. web存储标准包含localStorage对象和sessionStor ...

  7. 利用python将excel数据解析成json格式

    利用python将excel数据解析成json格式 转成json方便项目中用post请求推送数据自定义数据,也方便测试: import xlrdimport jsonimport requests d ...

  8. FastAdmin-T

    FastAdmin 注意食用姿势,建议先通读官方文档一次,在看 根据环境及配置的不同,仅作参考 修改mysql表注释ALTER TABLE student COMMENT '学生表'; fastadm ...

  9. 【JulyEdu-Python基础】第 ３ 课：容器以及容器的访问使用

    大纲 容器切片 list/tupledictset 切片 列表推导 生成器 迭代器 容器 list 列表 序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第 ...

  10. 华为HCNA乱学Round 8：生成树