前端开关按钮

最新推荐文章于 2024-07-23 08:26:05 发布

置顶 Xmh0111

最新推荐文章于 2024-07-23 08:26:05 发布

阅读量3.5k

点赞数

文章标签：前端开关按钮按钮前端滑动开关简易前端开关按钮

本文链接：https://blog.csdn.net/Xmh1027/article/details/82147165

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>前端开关按钮</title>

*{
margin: 0px;
padding: 0px;
}
           .switchOn {
               display: inline-block;
               width: 50px;
               height: 22px;
               border-radius: 22px;
               background-color: #009f3c;
               position: relative;
               vertical-align: top;
               cursor: pointer;
           }
           .switchOn em {
               display: inline-block;
               width: 18px;
               height: 18px;
               border-radius:50%;
               background:#FFFFFF;
               position: absolute;
               right: 2px;
               top: 2px;
               transition: all 0.5s linear;
           }
           .switchOn:after{
               content: 'ON';
               font-size: 12px;
               position: absolute;
               left:6px;
               top: 4px;
               color: #FFFFFF;
           }
           .switchOn.switchOff{
               background-color: red;
           }
           .switchOn.switchOff em{
               left: 2px;
           }
           .switchOn.switchOff:after{
               content: '';
           }
           .switchOn.switchOff:before{
               content: 'OFF';
               font-size: 12px;
               position: absolute;
               right:5px;
               top: 4px;
               color: #FFFFFF;
           }
       </style>
   </head>

   <body>
<div class="switchOn switchOff">
<em></em>
</div>
   </body>
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script type="text/javascript">
       $(document).on('click','.switchOn',function(){
           $(this).toggleClass('switchOff');
       });
   </script>
</html>