css模拟switch效果

最新推荐文章于 2024-04-12 17:01:15 发布

金翅

最新推荐文章于 2024-04-12 17:01:15 发布

阅读量317

点赞数

分类专栏： js+jq html5+css3 文章标签： css3 css javascript

本文链接：https://blog.csdn.net/qq_37103514/article/details/122043606

版权

html5+css3 同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

js+jq

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            /* 开关的大小*/
            .switch-container {
                height: 24px;
                width: 48px;
            }
            /*设置checkbox不显示*/
            .switch {
                display: none;
            }
            /*设置label标签为椭圆状*/
            .switch-container label {
                display: block;
                background-color: #eee;
                height: 100%;
                width: 100%;
                cursor: pointer;
                border-radius: 25px;
                position: relative;
            }
            /*在label标签内容之前添加如下样式，形成一个未选中状态*/
            .switch-container label:before {
                content: "";
                display: block;
                border-radius: 25px;
                height: 100%;
                width: 24px;
                background-color: white;
                position: absolute;
                left: 0px;
                box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
                -webkit-transition: all 0.5s ease;
                transition: all 0.5s ease;
            }

            /*选中后，未选中样式消失*/
            #switch:checked ~ label:before {
                left: 24px;
            }
            /*选中后label的背景色改变*/
            #switch:checked ~ label {
                background-color: #4dbd74;
            }
            .box{
                display: flex;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <span>消息提示音</span>:
            <div class="switch-container">
                <input
                    type="checkbox"
                    id="switch"
                    class="switch"
                    checked="checked"
                />
                <label for="switch" onclick="switchClick()"></label>
            </div>
        </div>
        <button class="btn">点击测试</button>
        <audio id="audio" src="tone.mp3"></audio>
        <script src="js/jquery-1.8.3.min.js"></script>
        <script>
            $(".btn").click(function () {
		        if(localStorage.getItem('booleanName')){
		            let booleanVal = JSON.parse(localStorage.getItem('booleanName')) //获取状态
		            $("#switch").prop('checked', booleanVal)
		        }
		        audioPlay();
		    });
		    function audioPlay() {
		        let Audio = $("#audio")[0];
		        if (document.getElementById("switch").checked === true) {//判断boolean状态是否关闭消息提示音
		            Audio.play();
		        } else {
		            Audio.pause();
		        }
		    }
		    switchClick = function () {
		        localStorage.setItem("booleanName",!document.getElementById("switch").checked) //存储状态
		    }
        </script>
    </body>
</html>