开关灯效果-01 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>开关灯效果</title>
<style type="text/css">
*{
    margin:0;
    padding:0;
    border:none;
    }
.box{
    width:100px;
    height:40px;
    border-radius:20px;
    position:relative;
    background:#36C;
    }
.box input{
    width:100px;
    height:40px;
    border-radius:20px;
    float:left;
    opacity:0;
    z-index:10;
    }
.box span{
    width:50px;
    height:40px;
    border-radius:20px;
    background:#ccc;
    position:absolute;
    top:0;
    pointer-events:none;         
}
.left{
    right:0;
    pointer-events:none;
    }    
.right{
    left:0;
    pointer-events:none;    
    }
.box p{pointer-events:none;}
.box p{
    width:50px;
    height:40px;
    line-height:40px;
    font-size:16px;
    font-weight:bold;
    color:#fff;
    text-align:center;
    position:absolute;    
    top:0;
    }
.open{
    left:0;
    }
.close{
    right:0;
    }
</style>
</head>

<body>
<div class="box">
    <input type="radio" name="" checked="checked"/>
    <span class="left"></span>
    <p class="open">开</p>
</div>
</body>
<script type="text/javascript" src="花枪B端静态页/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".box input").click(function(){
            var objbg=$("span").attr("class");
            var objspn=$("span");        
            var objtext=$("p");
            if(objbg=="left"){
                    objspn.removeClass("left").addClass("right");                
                    objtext.removeClass("open").addClass("close");
                    objtext.text("关");
                    $(this).parent().css({"background-color":"#666","color":"#333"})
                }else{
                    objspn.removeClass("right").addClass("left");
                    objtext.removeClass("close").addClass("open");
                    objtext.text("开");
                    $(this).parent().css({"background-color":"#36C","color":"#fff"})
                    
                }    
                
                
        })    
        

    })
    
</script>
</html>

 

posted @ 2016-11-22 17:36  Jinsuo  阅读(169)  评论(0)    收藏  举报