实现switch 按钮滑动块_onlyformyself的博客-程序员宅基地

技术标签: js  

实现switch 按钮滑动块

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>switch button</title>
    <script src="./jquery.min.js"></script>
</head>
<style>
    .switch {
        position: relative;
        display: block;
        width: 74px;
        height: 26px;
        background-color: #fff;
        background-clip: padding-box;
        border: 2px solid #ddd;
        border-radius: 20px;
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
        -webkit-transition-duration: .2s;
        transition-duration: .2s;
        -webkit-transition-property: background-color,border;
        transition-property: background-color,border;
    }
    .switch .switch-handle {
        position: absolute;
        top: -1px;
        left: -1px;
        z-index: 1;
        width: 28px;
        height: 28px;
        background-color: #fff;
        background-clip: padding-box;
        border-radius: 16px;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.4);
        box-shadow: 0 2px 5px rgba(0,0,0,.4);
        -webkit-transition: .2s ease-in-out;
        transition: .2s ease-in-out;
        -webkit-transition-property: -webkit-transform,width,left;
        transition-property: transform,width,left;
    }
    .switch.active {
        background-color: #4cd964;
        border-color: #4cd964;
    }
    .switch-mini {
        width: 43px;
    }
</style>
<body>
<div class="switch switch-mini" data-switch="4" style="transition-duration: 0.2s;">
    <div class="switch-handle" style="transition-duration: 0.2s; transform: translate(0px, 0px);"></div>
</div>
</body>
<script>
    //document.getElementsByClassName("switch")
    $(function () {
        $(".switch").click(function () {
            if($(this).hasClass("active")){
                $(this).removeClass("active");
                $(this).find(".switch-handle").css({"transition-duration":"0.2s","transform":"translate(0px, 0px)"})
            }else{
                $(this).addClass("active");
                $(this).find(".switch-handle").css({"transition-duration":"0.2s","transform":"translate(16px, 0px)"})
            }
        })
    })
</script>
</html>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/onlyformyself/article/details/111831628

智能推荐

java sql语句防注入_java防sql注入的sql语句拼接工具sqlHandle_weixin_39589557的博客-程序员宅基地

我在做网站的时候有一个需要在不同的插入时间改变查询的逻辑结构,这个时候用PreparedStatement就不太适合了灵活性太差。所以我就写了一个sql拼接工具。它的原理是将sql语句段与值绑定在一起,然后在最后拼接的时候把值按顺序传人给PreparedStatement。这样我们任意拼接我们的sql语句还可以防止sql注入的困扰。平时我都是用Hibernate进行操作,但有时我多表查询是Hibe...

sublime 转小写_Sublime Text快捷键和使用技巧_weixin_39662834的博客-程序员宅基地

Sublime Text快捷键新开页面:ctrl+n 回复刚刚关闭的页面:ctrl+shift+T切换页面:ctrl+tab合并行: 选中并ctrl+j向右缩进:ctrl+] (右方括号)向左缩进:ctrl+[(左方括号)块级代码缩进:(ctrl+shift+p呼出搜索框)Reindent Lines向下另起一行:ctrl+回车向上另起一行:shift+ctrl+回车选中一个单词:ctrl+d选...

java类前文档注释_Java 类注释文档编写方法_psychoctor的博客-程序员宅基地

Java 类注释文档编写方法对于Java语言,最体贴的一项设计就是它并没有打算让人们为了写程序而写程序——人们也需要考虑程序的文档化问题。对于程序的文档化,最大的问题莫过于对文档的维护。若文档与代码分离,那么每次改变代码后都要改变文档,这无疑会变成相当麻烦的一件事情。解决的方法看起来似乎很简单:将代码同文档“链接”起来。为达到这个目的,最简单的方法是将所有内容都置于同一个文件。然而,为使一切都整齐...

rocketmq架构和数据存储_为爱停留的博客-程序员宅基地_rocketmq 数据

注意:1、nameServer1 和nameServer2 是相互独立的,这点跟 zookeeper集群不一样2、每个broker都要配置 nameServer 下所有的节点,注册节点信息,topic信息,队列信息3、节点 broker.name相同的是 同一个小集群,其中broker.id=0 是master节点,broker.id非0的是slave节点4、offset存放在broker中5、producer,comsumer会间隔30s 从nameServer中 把最新的路由...

layui table勾选框的修改_layui table复选框禁止某几条勾选的实例_weixin_40000301的博客-程序员宅基地

Layui table复选框禁止勾选var list = [0,1,3];//获得禁用的tr的行index//遍历设置复选框禁用for(var i=0;i$(".layui-table tr[data-index="+list[i]+"] input[type='checkbox']").prop('disabled',true);$(".layui-table tr[data-index="+l...

随便推点

安卓手机开不了机_手机进水了怎么处理 手机进水开不了机怎么办 手机进水声音变沙哑..._weixin_39823017的博客-程序员宅基地

我们现在的生活越来越离不开手机,手机已经不仅仅是简单的通话功能,购物、支付、上网生活缴费,现在都可以在手机上实现,信息技术的发展给我们带来了巨大的便利,手机的体积很小,可以随身携带,相信很多人都遇到过手机掉进水里的体验,今天我们就一起来了解一下手机进水了怎么处理,手机进水开不了机怎么办,手机进水声音变沙哑怎么办?一、手机进水了怎么处理相信很多小伙伴都有手机不小心掉到水里的痛苦经历,虽然说现在市面上...

战队口号霸气押韵8字_偶像团队应援口号,火箭霸气TF暖心,粉墨粉丝表示臣妾做不到..._weixin_39602005的博客-程序员宅基地

娱乐圈是一个庞大的圈子,到目前为止,它里面的明星就数不胜数,里面有着许许多多不同性格的人,除此之外,也有许多年龄相仿,性格相似的人会组成一个团体一起出道,虽然娱乐圈到目前为止已经是非常庞大,而且非常的有竞争力,但是仍然有一些新人想要跻身进娱乐圈。比如最近在《创造营2020》经历了长达七个月的训练才出道的硬糖少女303,她们经历了很久的训练,也经历了很残忍的淘汰模式,所以她们按道理来说,应该已经具有...

python支持中文_python如何支持中文_weixin_39983383的博客-程序员宅基地

Python 输出 "Hello, World!",英文没有问题,但是如果你输出中文字符 "你好,世界" 就有可能会碰到中文编码问题。Python 文件中如果未指定编码,在执行过程会出现报错:#!/usr/bin/pythonprint "你好,世界";以上程序执行输出结果为:File "test.py", line 2SyntaxError: Non-ASCII character '\xe4'...

cmos可以修改计算机的硬件配置参数吗,(计算机CMOS设置详解1.doc_威尼斯海盗的博客-程序员宅基地

(计算机CMOS设置详解1计算机CMOS设置详解?BIOS的含义是“基本输入输出系统”,它起到电脑硬件与软件之间的交换接口。有关系统的时间、日期、内存容量软硬盘驱动器的类型及容量、显示方式、键盘安装等许多重要参数被存储在一个叫做CMOS RAM的非易失性存储器中(由充电电池供电),故称之为CMOS参数。CMOS参数直接关系到电脑系统的运行状态和性能的发挥。用户可通过 BIOS SETUP程序来设置...

asp.net解析html,,Asp.Net HTML 解析类库_机智团队(风清扬)的博客-程序员宅基地

1、HtmlAgilityPackHtmlAgilityPack是.net下的一个HTML解析类库。支持用XPath来解析HTML。这个意义不小,为什么呢?因为对于页面上的元素的xpath某些强大的浏览器能够直接获取得到,并不需要手动写。节约了大半写正则表达式的时间,当然正则表达式有时候在进一步获取的时候还需要写,但是通过xpath解析之后,正则表达式已经要匹配的范围已经非常小了。而且,不用正则表...

怎样培养想象力?_weixin_33957648的博客-程序员宅基地

想象力有一部分是靠天生的,其实大多数行业都需要想象力,例如侦探,科研工作者,商业人士,政治家,还有就是设计师~~ 怎么培养确实是个问题,途径可能真的很多,甚至从幼儿时期就得开始训练,但我想楼主可以从一些较专业的书上找到更多答案,在这里,除了专业人士能给你回答,我们这种业余的就只能给你提供自己的经验了,别害怕胡思乱想,多想象自己的未来,如果自己达到某个目标会怎样,还可以多看看地理杂志之类的节目,把阅...

推荐文章

热门文章

相关标签