仿iPhone的switch开关

看到很多iPhone上的滑动开关效果的button,今天终于有时间搞一下

其实很简单,也不难就是大量用到了CSS3的属性,不需要引入图片,但是要一点JS来控制

贴上效果图:

开启的时候


关闭的效果



代码在这里:

<!DOCTYPE html>
<html>
<head>
    <title>anmiation</title>
    <!-- 让IE采用最新的渲染模式 -->
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <!-- 移动端的页面宽度等于设备宽度,缩放比为1 -->
    <meta name="viewport" content="width=device-width" initial-scale="1">
    <meta charset="utf-8">

</head>
<style type="text/css" media="screen">
.switch-bg {
    width: 150px;
    height: 50px;
    background: #76d95c;
    border-radius: 50px;
    box-shadow:inset 0px 0px 3px;
    transition:all 0.5s;
}
.switch-block {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 50%;
    position: relative;
    top: 1px;
    left: 1px;
    box-shadow: 1px 3px 5px;
    transition:all 0.5s;
}
.turn-off {
    background: #ffffff;
}
.turn-off>.switch-block {
    left: 99px;
}
</style>
<body>
    <div class="switch-bg">
        <div class="switch-block"></div>
    </div>
    <script src="js/jquery-1.6.4.js"></script>
    <script>
    $(".switch-bg").click(function(){
        if($(this).hasClass("turn-off")){
            $(this).removeClass("turn-off");
            return;
        }
        $(this).addClass("turn-off");
    });
    </script>
</body>
</html>

用到了一点点的jquery

点击可以实现滑动哦

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页