HTML switch开关效果实现

最新推荐文章于 2024-12-30 09:00:00 发布

小陈哥₁₇₉₈

最新推荐文章于 2024-12-30 09:00:00 发布

阅读量1.4k

点赞数 20

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_38863493/article/details/144241937

文章目录

一、效果展示
二、实现

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果展示

在这里插入图片描述

二、实现

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>switch开关实现</title>
    </head>
    <script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .text-switch { display: none;}
        .text-switch + label {
            display: inline-block;
            box-sizing: border-box;
            height: 22px;
            min-width: 44px;
            line-height: 20px;
            vertical-align: middle;
            border-radius: 100px;
            border: 1px solid transparent;
            background-color: rgba(0, 0, 0, 0.25);
            cursor: pointer;
            -webkit-transition: all 0.36s;
            transition: all 0.36s;
            position: relative;
        }
        .text-switch:checked + label {
            background-color: #1890ff;
        }
        .text-switch + label::before {
            content: "";
            display: block;
            width: 18px;
            height: 18px;
            position: absolute;
            left: 1px;
            top: 1px;
            border-radius: 18px;
            background-color: #fff;
            cursor: pointer;
            transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
            -webkit-transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
            -webkit-box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
            box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
        }
        .text-switch:checked + label::before {
            left: 23px;
            transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
            -webkit-transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
        }
        .text-switch + label::after {
            content: "关";
            position: absolute;
            top: 1px;
            left: 24px;
            font-size: 12px;
            color: #fff;
        }
        .text-switch:checked + label::after {
            content: "开";
            left: 5px;
        }
    </style>
 
    <body>
        <div>
            <span style="margin-right:3px;">永不过期</span>
            <input type="checkbox" id="text-switch" class="text-switch" />
            <label for="text-switch"></label>
        </div>
        <script>
        // 获取开关变化
        $("#text-switch").on("change", function () {
            if ($(this).is(":checked")) {
                // 开 true
                switchStatus = $(this).is(":checked");
            } else {
                // 关 false
                switchStatus = $(this).is(":checked");
            }
            console.log((switchStatus)? "开" : "关");
        });
        </script>
    </body>
</html>