.circular1{ ???????????width: 50px; ???????????height: 30px; ???????????border-radius: 16px; ???????????background-color: #ccc; ???????????transition: .3s; ???????????cursor: pointer; }.round-button1{ ???????????width: 30px; ???????????height: 30px; ???????????background: #fff; ???????????border-radius: 50%; ???????????box-shadow: 0 1px 5px rgba(0,0,0,.5); ???????????transition: .3s; ???????????position: relative; ???????????left: 0;}.round-button1:hover{ ???????????transform: scale(1.2); ???????????box-shadow: 0 1px 8px rgba(0,0,0,.5);}<div class="circular1"> ???<div class="round-button1"></div></div>
$(function () { ???????$(‘.circular1‘).click(function () { ???????????var left = $(‘.round-button1‘).css(‘left‘); ???????????left = parseInt(left); ???????????if (left == 0) { ???????????????$(‘.round-button1‘).css({‘left‘: ‘22px‘, ‘background-color‘: ‘#F00‘}); ???????????????$(this).css({‘background-color‘: ‘#e7e7e7‘, ‘box-shadow‘: ‘0 0 5px #999 inset‘}) ???????????} else { ???????????????$(‘.round-button1‘).css({‘left‘: ‘0‘, ‘background-color‘: ‘#fff‘}) ???????????} ???????}) ???})jquery开关按钮效果
原文地址：http://www.cnblogs.com/coldfishdt/p/7493642.html