jQuery开关切换效果代码

新建html文档。

书写hmtl代码。

书写css代码必要样式。[class|=switch] { position: relative; display: inline-block; width: 50px; height: 30px; border-radius: 16px; line-height: 32px; -webkit-tap-highlight-color:rgba(255,255,255,0);}.switch-on { border: 1px solid white; box-shadow: white 0px 0px 0px 16px inset; transition: border 0.4s, box-shadow 0.2s, background-color 1.2s; background-color: white; cursor: pointer; }.slider { position: absolute; display: inline-block; width: 30px; height: 30px; background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 50%; left: 0; top: 0; }.switch-on .slider { left: 20px; transition: background-color 0.4s, left 0.2s; }.switch-off { border: 1px solid #dfdfdf; transition: border 0.4s, box-shadow 0.4s; background-color: rgb(255, 255, 255); box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; background-color: rgb(255, 255, 255); cursor: pointer; }.switch-off .slider { left: 0; transition: background-color 0.4s, left 0.2s; }.switch-on.switch-disabled { opacity: .5; cursor: auto; }.switch-off.switch-disabled { background-color: #F0F0F0 !important; cursor: auto; }

书写css代码。

书写并添加js代码。

书写并添加js代码。

代码整体结构。

查看效果。