前端实现滑动开关

最新推荐文章于 2024-04-29 10:40:41 发布

weixin_34259232

最新推荐文章于 2024-04-29 10:40:41 发布

阅读量947

点赞数

文章标签：前端前端框架 javascript ViewUI

原文链接：http://www.cnblogs.com/SinW/p/9240098.html

版权

　　日常开发中实现开关，或者更准确说实现单击按钮效果的方法很多，问题是怎么做才能让其更美观的展示在浏览器上。

　　效果图如下：

　　之前在网上看过不少实现的方法，其中就有一个是使用纯css3写出来的，以下是纯css代码实现的网站地址：https://proto.io/freebies/onoff/

　　以下是该网站上展示的的源码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>滑动开关</title>
 5     <style type="text/css">
 6         .onoffswitch {
 7             position: relative; 
 8             width: 110px;
 9             -webkit-user-select:none;
10             -moz-user-select:none; 
11             -ms-user-select: none;
12         }
13         .onoffswitch-checkbox {
14             display: none;
15         }
16         .onoffswitch-label {
17             display: block; 
18             overflow: hidden; 
19             cursor: pointer;
20             border: 2px solid #E3E3E3; 
21             border-radius: 36px;
22         }
23         .onoffswitch-inner {
24             display: block; 
25             width: 200%; 
26             margin-left: -100%;
27             transition: margin 0.3s ease-in 0s;
28         }
29         .onoffswitch-inner:before, .onoffswitch-inner:after {
30             display: block; 
31             float: left; 
32             width: 50%; 
33             height: 36px; 
34             padding: 0; 
35             line-height: 36px;
36             font-size: 16px; 
37             color: white; 
38             font-family: Trebuchet, Arial, sans-serif; 
39             font-weight: bold;
40             box-sizing: border-box;
41         }
42         .onoffswitch-inner:before {
43                 content: "on";
44                 padding-left: 10px;
45                 background-color: #FFFFFF;
46                 color: #27A1CA;
47                 text-align: left;
48         }
49         .onoffswitch-inner:after {
50             content: "off";
51             padding-right: 10px;
52             background-color: #FFFFFF; 
53             color: #666666;
54             text-align: right;
55         }
56         .onoffswitch-switch {
57             display: block; 
58             width: 36px; 
59             margin: 0px;
60             background: #A1A1A1;
61             position: absolute; 
62             top: 0; bottom: 0;
63             right: 70px;
64             border: 2px solid #E3E3E3; 
65             border-radius: 36px;
66             transition: all 0.3s ease-in 0s; 
67         }
68         .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
69             margin-left: 0;
70         }
71         .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
72             right: 0px; 
73             background-color: #27A1CA; 
74         }
75     </style>
76 </head>
77 <body>
78 <div class="onoffswitch">
79     <!-- 开关默认关闭 -->
80     <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
81     <label class="onoffswitch-label" for="myonoffswitch">
82         <span class="onoffswitch-inner"></span>
83         <span class="onoffswitch-switch"></span>
84     </label>
85 </div>
86 </body>
87 </html>

　　在这里，不得不说很佩服写出以上源码的作者，确实很牛，但是以上代码太过繁琐复杂，而如果使用js实现反而更加通俗易懂

　　以下是我自己写的实现滑动开关的HTML+CSS+Jquery代码，

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>滑动开关</title>
 5     <style type="text/css">
 6         .contentBox{
 7             border: 1px solid #E3E3E3;
 8             width: 72px;
 9             border-radius: 30px;
10         }
11         .btnBox{
12             width: 72px;
13             height: 30px;
14             border-radius: 30px;
15             -webkit-border-radius:30px;
16             -moz-border-radius:30px;
17             background-color: white;
18             position: relative;
19             cursor: pointer;
20         }
21         #btn{
22             width: 28px;
23             height: 28px;
24             left: -1px;
25             border:1px solid #E3E3E3;
26             border-radius: 30px;
27             -webkit-border-radius:30px;
28             -moz-border-radius:30px;
29             background-color: #fff;
30             position: absolute;
31         }
32         .off{
33             display: inline-block;
34             padding: 3px;
35             text-align: left;
36             padding-left: 35px;
37         }
38         .on{
39             display: none;
40             padding:3px;
41             text-align: left;
42             padding-left: 5px;
43             
44         }
45     </style>
46     <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
47     <script>
48         $(function(){
49             $(".contentBox").on("click",function(){
50                 if($("#btn").attr("isopen")=="off"){
51                     $("#btn").attr("isopen","on").animate({left:'43px'});
52                     $(".btnBox").css("background-color","green");
53                     $(".on").css("display","inline-block");
54                     $(".off").css("display","none");
55                 }else if($("#btn").attr("isopen")=="on"){
56                     $("#btn").attr("isopen","off").animate({left:"-1px"});
57                     $(".btnBox").css("background-color","white");
58                     $(".on").css("display","none");
59                     $(".off").css("display","inline-block");
60                 }
61             })
62         })
63     </script>
64 </head>
65 <body>
66     <div class="container">
67         <div class="contentBox">
68             <div class="btnBox">
69                 <div id="btn" isopen="off"></div>
70                 <span class="on">打开</span>
71                 <span class="off">关闭</span>
72             </div>
73         </div>
74     </div>
75 </body>
76 </html>

转载于:https://www.cnblogs.com/SinW/p/9240098.html

weixin_34259232

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端实现滑动开关

　　日常开发中实现开关，或者更准确说实现单击按钮效果的方法很多，问题是怎么做才能让其更美观的展示在浏览器上。　　效果图如下：　　　　　　　　　　之前在网上看过不少实现的方法，其中就有一个是使用纯css3写出来的，以下是纯css代码实现的网站地址：https://proto.io/freebies/onoff/　　以下是该网站上展示的的源码： 1 <!DOCTYPE h...
复制链接

扫一扫