<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>开关灯效果</title> <style type="text/css"> *{ margin:0; padding:0; border:none; } .box{ 100px; height:40px; border-radius:20px; position:relative; background:#36C; } .box input{ 100px; height:40px; border-radius:20px; float:left; opacity:0; z-index:10; } .box span{ 50px; height:40px; border-radius:20px; background:#ccc; position:absolute; top:0; pointer-events:none; } .left{ right:0; pointer-events:none; } .right{ left:0; pointer-events:none; } .box p{pointer-events:none;} .box p{ 50px; height:40px; line-height:40px; font-size:16px; font-weight:bold; color:#fff; text-align:center; position:absolute; top:0; } .open{ left:0; } .close{ right:0; } </style> </head> <body> <div class="box"> <input type="radio" name="" checked="checked"/> <span class="left"></span> <p class="open">开</p> </div> </body> <script type="text/javascript" src="花枪B端静态页/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".box input").click(function(){ var objbg=$("span").attr("class"); var objspn=$("span"); var objtext=$("p"); if(objbg=="left"){ objspn.removeClass("left").addClass("right"); objtext.removeClass("open").addClass("close"); objtext.text("关"); $(this).parent().css({"background-color":"#666","color":"#333"}) }else{ objspn.removeClass("right").addClass("left"); objtext.removeClass("close").addClass("open"); objtext.text("开"); $(this).parent().css({"background-color":"#36C","color":"#fff"}) } }) }) </script> </html>