实现switch 按钮滑动块

最新推荐文章于 2022-12-21 11:00:00 发布

原创最新推荐文章于 2022-12-21 11:00:00 发布 · 325 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

博客主要围绕信息技术领域中switch按钮滑动块的实现展开，聚焦于如何达成这一功能。

实现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>