<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> body{background-color: #dedede;margin: 60% 35%;padding: 0;} .btn-change{ width: 100px; height: 40px; border-radius: 20px; border: 1px solid #dedede; font-size: 1.3em; right: 4%; position: relative; overflow: hidden; } .btn-dot{ height: 40px; width: 40px; background-color: #dedede; border-radius: 20px; position: absolute; z-index: 99; } .btn-left{ background-color:#74B700; position: absolute; width: 90px; height: 40px; line-height: 40px; left: -70px; color: #fff; text-align: left; padding-left: 30px; } .btn-move{position: absolute;} .btn-right{ background-color: #ebebeb; position: absolute; width: 80px; height: 40px; line-height: 40px; text-align: left; padding-left: 20px; left: 20px; color: #333; } </style> <link rel="stylesheet" href="usercss/changebtn.css"> <script src="jquery-1.10.2.js"></script> <body> <div class="btn-change" data-switch="false"> <div class="btn-move"> <div class="btn-left">关注</div> <div class="btn-dot"></div> <div class="btn-right">未关注</div> </div> </div> </body> </html> <script> $(function(){ $(".btn-change").click(function(){ var switch1=$(this); var flag=switch1.attr("data-switch"); if(flag=="false") { switch1.find(".btn-move").animate({ "left": "60px" }, 500); switch1.attr("data-switch","true"); }else{ switch1.find(".btn-move").animate({ "left": "0" }, 500); switch1.attr("data-switch","false"); } }) }) </script>
效果图：
原文：http://www.cnblogs.com/xuhang/p/4433008.html