我认为按钮的绘制分以下三个步骤
效果图
仿IOS-1.jpg
仿IOS-2.jpg
- 再接着绘制要切换的状态
.on:after { content: 'ON'; border-radius:30px; transform: translate(56px, 0); color:transparent; background-color:#4BD429; }
仿IOS-3.jpg
- 最后一步,写JS代码进行切换
实际上,在CSS的切换之中,toggleClass是最为方便的。
但是!!!
这种切换方法不能切换你要触发的JS事件,
毕竟,我们画按钮是为了完成某些功能,
所以我采用的是这种方式,但也许并不是最好的
var zn=0; $('.button').click(function(e){ if(zn==1){ $(this).removeClass("on").addClass("off");
到此,一个完整的开关按钮就绘制完成了
感谢你能花3~5分钟的时间阅览我不专业的教程
PS:昨天要绘制一个按钮控制灯泡的开关(实际上就是切换背景图片),然后我四周一看,看到了墙壁上的一个公牛开关,既然是控制电灯的,我就想玩一玩仿真开关,忍着中午的睡意,还真勉强的给绘制出来了
绘制过程并不复杂,我也就不细说了,贴下效果图和代码,感兴趣的可以自行看一下
仿真开关.jpg
仿真-2.jpg
PS:我引用了一个初始化的CSS文件,可能需要
box-sizing:border-box;
<style type="text/css">