开关没有用到JS写，纯CSS写的，直接贴代码吧：
html页面：
1 <body> 2 <section class="select-box"> 3 <div class="checkbox"> 4 <input type="checkbox"> 5 <label></label> 6 </div> 7 </section> 8 </body>
CSS样式：
1 .select-box *, 2 .select-box *:after, 3 .select-box *:before { 4 box-sizing: border-box; 5 } 6 7 .select-box { 8 /*float: left; 9 min- 150px; 10 33.33%;*/ 11 margin: 0 auto; 12 /*min-height: 100px;*/ 13 } 14 /*=====================*/ 15 16 .checkbox { 17 position: relative; 18 display: inline-block; 19 } 20 21 22 .checkbox label { 23 90px; 24 height: 42px; 25 background: #ccc; 26 position: relative; 27 display: inline-block; 28 border-radius: 46px; 29 -webkit-transition: 0.4s; 30 transition: 0.4s; 31 } 32 33 .checkbox label:after { 34 content: ''; 35 position: absolute; 36 30px; 37 height: 30px; 38 border-radius: 100%; 39 left: 0px; 40 top: 0px; 41 z-index: 2; 42 background: #fff; 43 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 44 -webkit-transition: 0.4s; 45 transition: 0.4s; 46 } 47 48 .checkbox input { 49 position: absolute; 50 left: 0; 51 top: 0; 52 100%; 53 height: 100%; 54 z-index: 5; 55 opacity: 0; 56 cursor: pointer; 57 } 58 59 .checkbox input:hover+label:after { 60 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15); 61 } 62 63 .checkbox input:checked+label:after { 64 left: 40px; 65 } 66 67 .checkbox { 68 80px; 69 height: 30px; 70 border: 2px solid #b2b2b2; 71 background: #2BBC35; 72 border-radius: 30px; 73 overflow: hidden; 74 } 75 76 .checkbox:after, 77 .checkbox label:before { 78 content: '打开'; 79 position: absolute; 80 left: 2px; 81 top: 5px; 82 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 83 font-size: 12px; 84 color: #fff; 85 } 86 87 .checkbox label:before { 88 content: '关闭'; 89 left: auto; 90 top: 5px; 91 right: 25px; 92 z-index: 1; 93 } 94 95 .checkbox label { 96 background: #b2b2b2; 97 90px; 98 height: 32px; 99 border-radius: 4px; 100 } 101 102 .checkbox label:after { 103 border-radius: 25px; 104 box-shadow: none !important; 105 top: 0; 106 25px; 107 height: 25px; 108 } 109 110 .checkbox input:checked+label { 111 -ms-transform: translateX(55px); 112 -webkit-transform: translateX(55px); 113 transform: translateX(55px); 114 } 115 116 .checkbox input:checked+label:after { 117 left: -5px; 118 top: 0px; 119 }
效果图 ：
因为采用的是transform实现动画效果，所以IE低版本不兼容。还有主要就是调样式，没啥了。