开关灯单选

最新推荐文章于 2026-01-01 17:43:06 发布

转载最新推荐文章于 2026-01-01 17:43:06 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jinsuo/p/6090224.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一个使用纯CSS实现的性别切换按钮案例。该按钮通过简单的HTML结构和CSS样式实现了性别选项的动态切换效果，并借助jQuery进一步增强了交互体验。

<!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">
.btn-toggle{
    width: 100px;
    height: 30px;
    position: relative;
    border-radius: 20px;
    background-color: #6699cc;
    float: right;
}

 .btn-checkbox{
    position: absolute;
    left:-4px;
    top:-3px;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    cursor: pointer;
}

.btn-style{
    position: absolute;
    z-index: 9;
    height: 26px;
    width: 45px;
    background-color: #fff;
    border-radius: 20px;
    transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
    transition-property: all;
    left:2px;
    top:2px;
}


.btn-toggle .btn-checkbox:checked + .btn-style{
    left:53px;
}

.btn-sex{
    position: absolute;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    color: #fff;

}

 .btn-toggle .left{
    padding-left: 20px; 
}


 .btn-toggle .right{
    padding-left: 65px;
}

</style>
</head>

<body>

<div class="btn-toggle">
    <input type="checkbox" class="btn-checkbox" checked="checked">
    <div class="btn-style"></div>
    <div class="btn-sex left">
        男
    </div>
</div>
</body>
<script type="text/javascript" src="补货页面/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/***********性别按钮特效＊＊＊***********/
    $(function () {
        var onOff = true;
        $('.btn-toggle').on('click',function(){
            var oToggle = $(this);
            var oSex = oToggle.children('.btn-sex');

            if(onOff){
                oToggle.css("background-color","#ccc");
                oSex.text('女').removeClass('left').addClass('right');
                onOff = false;
            }else {
                oToggle.css("background-color","#6699cc");
                oSex.text('男').removeClass('right').addClass('left');
                onOff = true;
            }

        });
    })
</script>
</html>