第九章文件和内容管理2分

代码比较简单，有需要直接在下边粘贴使用吧~

html:

	<div class="switch-box">
		<input id="switch" type="checkbox">
		<label></label>
	</div>

 css：

		.switch-box {
			position: relative;
			height: 25px;
		}

		.switch-box label {
			width: 50px;
			height: 25px;
			background: #ccc;
			position: relative;
			display: inline-block;
			border-radius: 46px;
			-webkit-transition: 0.4s;
			transition: 0.4s;
		}

		.switch-box label:after {
			content: '';
			position: absolute;
			width: 21px;
			height: 25px;
			border-radius: 100%;
			left: 0;
			top: -5px;
			z-index: 2;
			background: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
			-webkit-transition: 0.4s;
			transition: 0.4s;
		}

		.switch-box input {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 5;
			opacity: 0;
		}

		.switch-box label:after {
			top: 0;
			width: 23px;
			height: 23px;
			margin: 1px 0;
		}

		.switch-box input:checked+label {
			background: #eb8597;
		}

		.switch-box input:checked+label:after {
			left: 30px;
		}

js:

  $('#switch').change(function (e) {

      var isChecked = $(this).prop("checked") ? true : false;
		if (isChecked) {
			    console.log('选中...')
			} else {
			    console.log('取消选中...')
			}
	});