前端实现滑动开关
Posted sinw
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端实现滑动开关相关的知识，希望对你有一定的参考价值。
日常开发中实现开关，或者更准确说实现单击按钮效果的方法很多，问题是怎么做才能让其更美观的展示在浏览器上。
效果图如下：
之前在网上看过不少实现的方法，其中就有一个是使用纯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>
以上是关于前端实现滑动开关的主要内容，如果未能解决你的问题，请参考以下文章