<!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. CAD二次开发中各类多段线的dxf组码

    Document doc = Application.DocumentManager.MdiActiveDocument; Editor ed = doc.Editor; ed.WriteMessag ...

  2. [go]unsafe.Sizeof浅析

    sizeof 如果x为一个切片,sizeof返回的大小是切片的描述符,而不是切片所指向的内存的大小. 那么这里如果换成一个数组呢?而不是一个切片 arr := [...]int{1,2,3,4,5} ...

  3. Workflow-产品：泛微工作流引擎

    ylbtech-Workflow-产品:泛微工作流引擎 1.返回顶部 1. 工作流引擎平台技术架构 TECHNOLOGY FRAMEWORK 高度协同系统各应用模块 泛微工作流引擎平台是整个协同办公平 ...

  4. 六十五：CSRF攻击与防御之CSRF防御之form表单防御

    防御原理,将csrf_token放到session中,再将session放到cookie中 实现: from flask_wtf import CSRFProtect # flask_wtf 已经提供 ...

  5. 2019.12.04 ADT on eclipse 配置篇

    今天看JerryWang的简书博客https://www.jianshu.com/p/74ad8e4bbc49 ,SAP GUI 和ADT是互为补充的关系,有很多SAP新出的技术都没有办法在GUI上开 ...

  6. azure sql database CPU troubleshooting

    描述 最新我们一个稳定运行快一年的项目突然出现CPU方面的性能问题,该项目使用的azure sql database  P2 500DTU,运维同事监控到CPU使用非常高,客户反馈系统运行也比较卡.看 ...

  7. linux常用命令(20)用SecureCRT来上传和下载文件

    用SSH管理linux服务器时经常需要远程与本地之间交互文件.而直接用SecureCRT自带的上传下载功能无疑是最方便的,SecureCRT下的文件传输协议有ASCII.Xmodem.Zmodem.  ...

  8. java.lang.ClassNotFoundException: org.apache.commons.dbutils.QueryRunner

    七月 28, 2017 11:06:33 下午 org.apache.catalina.core.StandardWrapperValve invoke严重: Servlet.service() fo ...

  9. mysql双主架构

    注意:最好不要用innodedb来同步数据库,要用databus来同步数据库,数据量大要用上mycat中间件 Mysql主主同步环境部署: centos 7.4 三台云主机: mysql1 :10.1 ...

  10. H3C 模拟器 pc与sw直连 登录web

    配置与上一节相同 开启web功能,并登录 [sw1]ip http enable [sw1]local-user admin New local user added. [sw1-luser-mana ...