css布局之选择切换按钮

浏览数：20 / 时间：2015年06月09日

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    body{background-color: #dedede;margin: 60% 35%;padding: 0;}
    .btn-change{
        width: 100px;
        height: 40px;
        border-radius: 20px;
        border: 1px solid #dedede;
        font-size: 1.3em;
        right: 4%;
        position: relative;
        overflow: hidden;
    }
    .btn-dot{
        height: 40px;
        width: 40px;
        background-color: #dedede;
        border-radius: 20px;
        position: absolute;
        z-index: 99;
    }

    .btn-left{
        background-color:#74B700; 
        position: absolute;
        width: 90px;
        height: 40px;
        line-height: 40px;
        left: -70px;
        color: #fff;
        text-align: left;
        padding-left: 30px;
    }
    .btn-move{position: absolute;}
    .btn-right{
        background-color: #ebebeb;
        position: absolute;
        width: 80px;
        height: 40px;
        line-height: 40px;
        text-align: left;
        padding-left: 20px;
        left: 20px;
        color: #333;
    }
</style>
<link rel="stylesheet" href="usercss/changebtn.css">
<script src="jquery-1.10.2.js"></script>
<body>
<div class="btn-change" data-switch="false">
     <div class="btn-move">
         <div class="btn-left">关注</div>
          <div class="btn-dot"></div>
          <div class="btn-right">未关注</div>
      </div>
</div>
    
</body>
</html>
<script>
    $(function(){
        $(".btn-change").click(function(){
            var switch1=$(this);
            var flag=switch1.attr("data-switch");
            if(flag=="false")
            {
                switch1.find(".btn-move").animate({ "left": "60px" }, 500);
                switch1.attr("data-switch","true");
            }else{
                switch1.find(".btn-move").animate({ "left": "0" }, 500);
                switch1.attr("data-switch","false");
            }
        })
    })
</script>