<!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. -moz-box-shadow

    css的box-shadow是用来添加边框阴影效果的. 属性值详解: 1.inset可选值,默认阴影在盒子外使用inset后,阴影在盒子内,即使指定边框或者透明边框,阴影依然存在. 2.<off ...

  2. CentOS6.8安装Oracle11g

    ===== 这中间还有很多细节问题该文档中并没有说明和指出: 1.如/tmp目录必须单独分出来,不然oracle在以后的使用中会逐渐变慢 2.官网说的512M内存即可,这里纠正下,如果只是测试安装那还 ...

  3. （转载）IDEA中对Git的常规操作(合并,提交,新建分支,更新)

    工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张,组员小袁 场景一:小张创建项目并提交到远程Git仓库 场景二:小袁从远程Git仓库上获取项目源码 场景三:小 ...

  4. [笔记] Delphi使用DUnitX做单元测试的简单例子

    Delphi XE 提供了对DUnitX的支持,记录一个最简例子. 首先创建项目A,然后创建单元untCalc,代码如下: unit untCalc; interface type TCalc = c ...

  5. PTA --- 天梯赛 L1-059 敲笨钟

    L1-059 敲笨钟 (20 point(s)) 微博上有个自称“大笨钟V”的家伙,每天敲钟催促码农们爱惜身体早点睡觉.为了增加敲钟的趣味性,还会糟改几句古诗词.其糟改的方法为:去网上搜寻压“ong” ...

  6. jmeter响应数据中文乱码处理

    1.在jmeter的bin目录下找到  jmeter.properties  文件并打开 2.搜索关键字 “default.encoding”,将1084行(以搜索到的位置为准)改成下图所示:samp ...

  7. 对JavaScript事件处理程序/事件监听器的设定的简单介绍

    下面是一些对事件处理进行设定的方式. 指定为HTML元素的属性(事件处理程序) 指定为DOM元素的属性(事件处理程序) 通过EventTarget.addEventListener()进行指定(事件监 ...

  8. acrobat xi pro 11 补丁激活

    acrobat xi pro 11 是一款专门为Adobe Acrobat XI Pro 11制作的破解补丁,这款补丁可以免去软件的激活步骤,让用户可以永久免费使用这款软件.11是款功能强大的pdf设 ...

  9. mint ui解决Navbar和Infinite scroll共存时的bug

    Navbar和Infinite scroll共同使用时会出现无限加载的问题,滑动也会出现乱加载. 只需要判断一下就可以了,代码: html: <mt-navbar v-model="s ...

  10. sqlalchemy链接数据库

    from sqlalchemy import create_engine HOSTNAME = '127.0.0.1' PORT = 3306 DATABASE = 'first_sqlalchemy ...