滑动开关

 

   <style>
        * {
            margin: 0;
            padding: 0
        }

        #container {
            width: 200px;
            height: 50px;
            background: green;
            border-radius: 25px;
            overflow: hidden;
            transition: all 2s;
            -moz-transition: all 2s;
            -webkit-transition: all 2s;
            -o-transition: all 2s;
            border: 2px solid black;
        }

        .container_hover {
            background: blue !important;
        }

        .inner {
            width: 40px;
            height: 40px;
            background: red;
            transition: all 1s;
            -moz-transition: all 1s;
            -webkit-transition: all 1s;
            -o-transition: all 1s;
            border-radius: 100%;
            margin-left: 5px;
            margin-top: 5px;

        }

        .inner_hover {
            margin-left: 155px;
            background: white;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="inner"></div>
</div>
<script>
    $("#container").click(
            function () {
                if ($(this).hasClass("container_hover")) {
                    $(this).removeClass("container_hover")
                    $(this).find(".inner").removeClass("inner_hover");
                } else {
                    $(this).addClass("container_hover")
                    $(this).find(".inner").addClass("inner_hover");
                }
            }
    );
</script>
</body>
</html>
posted @ 2018-04-10 15:17  刘浩2561179983  阅读(180)  评论(0)  编辑  收藏  举报