<!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. CFS理论模型

    参考资料:<调度器笔记>Kevin.Liu <Linux kernel development> <深入Linux内核架构> version: 2.6.32.9 下 ...

  2. 885. Spiral Matrix III

    On a 2 dimensional grid with R rows and C columns, we start at (r0, c0) facing east. Here, the north ...

  3. springboot2.0数据制作为excel表格

    注意:由于公司需要大量导出数据成excel表格,因此在网上找了方法,亲测有效. 声明:该博客参考于https://blog.csdn.net/long530439142/article/details ...

  4. lucene 快速入门

    日常开发中,相信大家经常会用like去匹配一些数据,同时我们也知道,like往往会导致全表扫描,当数据量越来越大的时候,我们会纠结于 数据库的龟速查找,此时我们必须另寻蹊跷,这时lucene就可以大显 ...

  5. SQL学习（一）相关基础知识

    RDBMS基础知识 1.数据库是按照数据结构来组织.存储和管理数据的仓库:数据库是一些关联表的集合. 2.数据表是数据的矩阵,在一个数据库中的表看起来像一个简单的电子表格. 3.列:一列包含了相同的数 ...

  6. 【转】zookeeper之 zkServer.sh命令、zkCli.sh命令、四字命令

    [FROM]https://www.cnblogs.com/andy6/p/7674028.html 一.zkServer.sh 1.查看 zkServer.sh 帮助信息 [root@bigdata ...

  7. Xing: The Land Beyond — 从课堂到 Steam* 的卓越之旅

    Xing:The Land Beyond 的诞生最初源于大学的一个关卡设计课程,之后才登录 Kickstarter* 平台,采用虚拟现实技术,并由 Sony* 带到电子娱乐展览会.这个设计任务本来计划 ...

  8. Sql Service 存储过程、触发器

    if exists (select * from sysobjects where name='tb_admin') drop table tb_admin go create table tb_ad ...

  9. 第七次java实验报告

    Java实验报告 班级 计科二班 学号20188437 姓名 何磊 完成时间 2019/10/25 评分等级 实验四 类的继承 实验内容 )总票数1000张:(2)10个窗口同时开始卖票:(3)卖票过 ...

  10. Linux下面查看网卡的信息

    查看linux下面网卡的速度信息 Study From 百度知道 (懒得翻墙) 1. centos机器 安装的比较全(个人比较懒 没有使用core最小化安装, 避免出问题麻烦 公司网络太垃圾) 使用 ...