<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery做的滑动按钮开关</title> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" /> <link rel="stylesheet" href="./css/demo.css"> </head> <body> <div class="switch"> <div class="btn_fath clearfix on" onclick="toogle(this)"> <div class="move" data-state="off"></div> <div class="btnSwitch btn1"></div> <div class="btnSwitch btn2 "></div> </div> </div> <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script> <script type="text/javascript"> function toogle(th) { var ele = $(th).children(".move"); if (ele.attr("data-state") == "on") { ele.animate({ left: "3px" }, 100, function () { ele.attr("data-state", "off"); console.log("关"); }); $(th).removeClass("on").addClass("off"); } else if (ele.attr("data-state") == "off") { ele.animate({ left: '31px' }, 100, function () { $(this).attr("data-state", "on"); console.log("开"); }); $(th).removeClass("off").addClass("on"); } } </script> </body> </html>
demo.css
.switch { width: 55px; height: 26px; } .switch .btn_fath { position: relative; border-radius: 20px; } .switch .btn_fath .btn1 { float: left; } .switch .btn_fath .btn2 { float: right; } .switch .btn_fath .btnSwitch { height: 26px; width: 25px; border: none; color: #fff; line-height: 40px; font-size: 16px; text-align: center; z-index: 1; } .switch .btn_fath .move { z-index: 100; width: 20px; border-radius: 50%; height: 20px; top: 3px; position: absolute; cursor: pointer; background-color: #fff; } .on .move { left: 3px; } .on.btn_fath { background-color: #13ce66; } .off.btn_fath { background-color: #dcdfe6; }