<!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. Shutdown 源码阅读

    Shutdown /** * 虚拟机关闭步骤 * @since 1.3 */ class Shutdown { /* 关闭状态 */ private static final int RUNNING ...

  2. LC 650. 2 Keys Keyboard

    Initially on a notepad only one character 'A' is present. You can perform two operations on this not ...

  3. js如何获取window.location.href跳转后查询字符串的值？

    $("#worked_count").parent().attr("onClick","window.location.href='view/warn ...

  4. springboot2.0---控制台打印Mybatis的SQL记录

    题记:每次使用mybatis出错,都不知道sql原因,debug也不出结果,索性将其打印出来,更加容易排错. 亲测有效,只需要将下面的logback.xml放置在resource目录下即可打印. 方式 ...

  5. win10相机打不开，显示错误代码0xA00F4246(0x800706D9)

    有时我们在不知道什么情况下电脑便会变成这个样子,当我们以为是驱动问题的时候,或许我们可以使用下面的办法解决这个问题 方法: 1.WIN键+R打开命令端,输入regedit运行 2.进入 计算机\HKE ...

  6. Django学习笔记（一）Django基础

    新建项目 django-admin startproject my_site #会在当前目录新建my_site目录,可自行修改目录名 django-admin startproject my_site ...

  7. Ubuntu下c程序运行原理

    运行环境: 1.Vitural box下安装Ubuntu虚拟机 2.编译运行工具:gcc 3.编辑器:vim 主要过程: 1.利用vim编辑hello.c 2.编译和执行 (1)预处理阶段:使用 -E ...

  8. 【并行计算-CUDA开发】Windows下opencl环境配置

    首先声明我这篇主要是根据下面网站的介绍, 加以修改和详细描述,一步一步在我自己的电脑上实现的, http://www.cmnsoft.com/wordpress/?tag=opencl&pag ...

  9. 深入理解分布式系统的2PC和3PC

    协调者 在分布式系统中,每一个机器节点虽然都能明确的知道自己执行的事务是成功还是失败,但是却无法知道其他分布式节点的事务执行情况.因此,当一个事务要跨越多个分布式节点的时候(比如,淘宝下单流程,下单系 ...

  10. C++11智能指针原理和实现

    一.智能指针起因 在C++中,动态内存的管理是由程序员自己申请和释放的,用一对运算符完成:new和delete. new:在动态内存中为对象分配一块空间并返回一个指向该对象的指针: delete:指向 ...