利用css3動畫效果編寫滑動按鈕開關
阿新 • • 發佈：2019-01-26
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3做的滑動開關效果</title> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"/> </head> <style> .switch{ width: 100px; margin: 100px 0px 0 100px; } .btn_fath{ margin-top: 10px; position: relative; border-radius: 20px; } .on.btn_fath { background-color: #5281cd; } .on.active.btn_fath { background-color: #828282; } .off.btn_fath { background-color: #828282; } .off.active.btn_fath { background-color: #5281cd; } .btn1{ float: left; } .btn2{ float: right; } .switchBtn{ height: 40px; width: 50px; border:none; color: #fff; line-height: 40px; font-size: 16px; text-align: center; z-index: 1; } .move{ width: 40px; height: 40px; position: absolute; border-radius: 20px; z-index: 100; border: 1px solid #828282; background-color: #f1eff0; cursor: pointer; box-shadow: 1px 2px 2px 1px #fff inset,0 0 5px 1px #999; transition:transform ease 0.5s ; } .on .move{ left: 60px; } .off .move{ left: 0; } .active.on .move{ transform: translate(-60px,0px); } .active.off .move{ transform: translate(60px,0px); } </style> <body> <div class="switch"> <div class="btn_fath clearfix la_state" onclick="toogle(this)"> <div class="move"></div> <div class="switchBtn btn1">ON</div> <div class="switchBtn btn2 ">OFF</div> </div> <div class="btn_fath clearfix yj_state" onclick="toogle(this)"> <div class="move"></div> <div class="switchBtn btn1">ON</div> <div class="switchBtn btn2 ">OFF</div> </div> </div> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="bootstrap.min.js"></script> <script type="text/javascript"> //初始化頁面開關是on 還是off狀態的 $(function(){ $(".la_state").addClass("on"); $(".yj_state").addClass("off"); }) function toogle(th){ var ele = $(th); ele.toggleClass('active'); } </script> </body> </html>