H5实现开关选择切换效果

最新推荐文章于 2025-05-08 12:21:36 发布

原创最新推荐文章于 2025-05-08 12:21:36 发布 · 8.2k 阅读

5 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

27 篇文章

订阅专栏

这里写图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="telephone=yes" name="format-detection" />
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="x5-fullscreen" content="true">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>H5开关效果</title>
    <style>
        * {margin: 0;padding: 0;}
        body{background:#f1f1f1;}
        .swich{width:200px;margin:100px auto;}
        .swich .box{width:60px;height:30px;background:#ccc;border-radius:20px;transition: all .5s ease;}
        .swich input{display:none;}
        .swich .box span{display:inline-block;height:30px;width:30px;border-radius:15px;background:#fff;transform:translateX(0px);transition: all .5s ease;}
        .swich-on .box{background:forestgreen;transition: all .5s ease;}
        .swich-on .box span{transform:translateX(30px);transition: all .5s ease;}
    </style>

</head>

<body>
    <div class="swich">
        <input type="checkbox" value="" name=""/>
        <div class="box">
            <span></span>
        </div>
    </div>
</body>
</html>
<script>
    (function(select){
        var box = document.querySelector(select)
        var checkbox = box.querySelector("input");
        box.onclick = function(){
            this.classList.toggle("swich-on");
            if(checkbox.checked){
                console.log("已经选中");
                checkbox.checked = "true";
            }else{
                console.log("没有选中");
                checkbox.checked = "false";
            }
        }
    })(".swich");
</script>