纯CSS3 滑动按钮

版权声明：本文为博主原创文章，转载请注明出处http://blog.csdn.net/Mr_WEB_Yao https://blog.csdn.net/Mr_WEB_Yao/article/details/81000864

<style>
			.onoffswitch {position: absolute;right: 15px;top: 50%;margin-top: -15px; width:50px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;}
			.onoffswitch-checkbox {display: none;}
			.onoffswitch-label {display: block;overflow: hidden;cursor: pointer;border-radius: 20px;}
			.onoffswitch-inner {display: block;width: 200%;margin-left: -100%;transition: margin 0.3s ease-in 0s;}
			.onoffswitch-inner:before,.onoffswitch-inner:after{display: block;float: left;width: 50%;height: 30px;padding: 0;line-height: 30px;font-size: 19px;color: white;font-family: Trebuchet, Arial, sans-serif;font-weight: bold;box-sizing: border-box;}
			.onoffswitch-inner:before {content: "";padding-left: 13px;background-color: #a82d6f;}
			.onoffswitch-inner:after {content: "";padding-right: 13px;background-color: #999;text-align: right;}
			.onoffswitch-switch {display: block;width: 28px;height: 28px; margin:1px;background: #FFFFFF;position: absolute;top: 0;bottom: 0;right: 20px;border-radius: 20px;transition: all 0.3s ease-in 0s;}
			.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {margin-left: 0;}
			.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {right: 0px;}
		</style>
		<div class="onoffswitch">
					<input type="checkbox" name="onoffswitch" checked class="onoffswitch-checkbox" id="myonoffswitch" >
					<label class="onoffswitch-label" for="myonoffswitch">
					 <span class="onoffswitch-inner"></span>
					 <span class="onoffswitch-switch"></span>
					</label>
			</div>
			<script>
			$(".onoffswitch-label").click(function(){	
					var ac =$(".onoffswitch-checkbox[type='checkbox']");
					layer.confirm('您是如何看待前端开发？', {
						  btn: ['重要','奇葩'] //按钮
						}, function(){
						  layer.msg('的确很重要', {icon: 1});
						}, function(){
						  console.log(4);
		          if(ac.is(":checked")){
				    		ac.prop("checked",false);
				    	}else{
				        ac.prop("checked",true);
				      }
						});
		    });

所以有个经验就是：

• 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。

• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。