CSS和Jquery iOS风格切换按钮 打开或关闭

相关js代码$(document).ready(function(){$('.switch').click(function(){$(this).toggleClass("switchOn");});$('.switchBig').click(function(){$(this).toggleClass("switchBigOn");});});Css代码.switch {width: 62px;height: 32px;background: #e5e5e5;z-index: 0;margin: 0;padding: 0;appearance: none;border: none;cursor: pointer;position: relative;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;}.switch:before {content: ' ';position: absolute;left: 1px;top: 1px;width: 60px;height: 30px;background: #fff;z-index: 1;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;}.switch:after {content: ' ';height: 29px;width: 29px;border-radius: 28px;background: #fff;position: absolute;z-index: 2;top: 1px;left: 1px;-webkit-transition-duration: 300ms;transition-duration: 300ms;-webkit-box-shadow: 0 2px 5px #999999;box-shadow: 0 2px 5px #999999;}.switchOn,.switchOn:before{background: #4cd964 !important;}.switchOn:after{left: 32px !important;}.switchBig {width: 200px;height: 105px;background: #e5e5e5;z-index: 0;margin: 0;padding: 0;appearance: none;border: none;cursor: pointer;position: relative;border-radius:53px;-moz-border-radius:53px;-webkit-border-radius:53px;}.switchBig:before {content: ' ';position: absolute;left: 2px;top: 2px;width: 196px;height: 101px;background: #fff;z-index: 1;border-radius:52px;-moz-border-radius:52px;-webkit-border-radius:52px;}.switchBig:after {content: ' ';height: 100px;width: 100px;border-radius: 52px;background: #fff;position: absolute;z-index: 2;top: 2px;left: 2px;-webkit-transition-duration: 300ms;transition-duration: 300ms;-webkit-box-shadow: 0 2px 5px #999999;box-shadow: 0 2px 5px #999999;}.switchBigOn, .switchBigOn:before{background: #4cd964 !important;}.switchBigOn:after{left: 98px !important;}

在线演示        积分下载        6毛下载        砍两刀下载