css3实现手机效果的“切换标签”

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

Style样式

        .toggle {

            position: relative;

            display: inline-block;

            width: 60px;

            height: 30px;

            border: 1px solid #E5E5E5;

            background-color: #fff;

            background-clip: content-box;

            -webkit-border-radius: 30px;

            border-radius: 30px;

        }

            .toggle i {

                position: absolute;

                top:;

                left:;

                display: inline-block;

                content: "";

                width: 30px;

                height: 30px;

                -webkit-box-shadow: 0 0 2px #bbb;

                background-color: #fff;

                background-clip: content-box;

                -webkit-border-radius: 100%;

                border-radius: 100%;

                -webkit-transition: 300ms linear;

                transition: 300ms linear;

                -webkit-transform: translate3D(0,0,0);

                transform: translate3D(0,0,0);

            }

            .toggle.on {

                border-color: #4089e8;

                background-color: #4089e8;

            }

                .toggle.on i {

                    -webkit-transform: translate3D(30px,0,0);

                    transform: translate3D(30px,0,0);

                }

页面html

<span id="test" class="toggle"><i></i></span>

Script

    <script type="text/javascript">

        $(function () {

            $("#test").bind("click", function () {

                var target = $(this);

                if (target.hasClass("on")) target.removeClass("on");

                else target.addClass("on");

            });

        });

    </script>