繪制按鈕其實(shí)很簡(jiǎn)單，只不過對(duì)于還沒自己動(dòng)手繪制的“新人”來說，會(huì)有一點(diǎn)不知所措的感覺（其實(shí)我前天就是如此）；
為了方便大家的學(xué)習(xí)，我決定寫篇基礎(chǔ)教程來為web界做一點(diǎn)小小的共貢獻(xiàn)
我認(rèn)為按鈕的繪制分以下三個(gè)步驟
- 第一步，繪制按鈕的輪廓
- 選擇合適的html標(biāo)簽，設(shè)置輪廓的CSS
/* html代碼 */
<a href="#" class="button off"></a>
body{
background-color: #E6C9B6;
}
/* CSS樣式 */
/* 按鈕輪廓 */
.button{
display: block;
margin:100px auto;
position: relative;
width:100px;
height:40px;
border-radius: 50px;
border:1px solid #fff;
background-color: #E9E4E0;
}
效果圖
仿IOS-1.jpg
- 第二步，繪制按鈕的默認(rèn)狀態(tài)
- 這一步很重要，由于我們不會(huì)再給html文件添加其他的標(biāo)簽，所以我們需要用 :after 偽類對(duì)按鈕進(jìn)行CSS渲染
/* 接在上面繼續(xù)寫 */
.button:after{
display: block;
position: absolute; //相對(duì)按鈕的輪廓進(jìn)行決定定位
top:2px;
bottom: 2px; //即設(shè)置top,又設(shè)置bottom使元素自動(dòng)拉伸到最大
left:2px; //實(shí)際上，按鈕的寬度即為容器的高度-(top+bottom)
width:36px; //按鈕的寬度
line-height: 36px; //按鈕文字的高度，如果不需要文字，可移除
text-align: center;
text-transform: uppercase;
font-size: 16px;
background-color: #fff; //這里的背景顏色是按鈕的背景顏色
border:2px solid;
transition: all 500ms; //按鈕的動(dòng)畫時(shí)長(zhǎng)
}
實(shí)際上，做到這一步之后會(huì)發(fā)現(xiàn)，在瀏覽器上的效果沒有一點(diǎn)變化，還是之前的那樣子，不過不用著急，我們?cè)偌右稽c(diǎn)東西就很明顯了
- 在輪廓內(nèi)添加小按鈕
.off:after {
content: 'off';
border-radius:30px;
color: #999;
}
默認(rèn)為off狀態(tài)
仿IOS-2.jpg
- 再接著繪制要切換的狀態(tài)
.on:after {
content: 'ON';
border-radius:30px;
transform: translate(56px, 0);
color:transparent;
background-color:#4BD429;
}
仿IOS-3.jpg
- 最后一步，寫JS代碼進(jìn)行切換
實(shí)際上，在CSS的切換之中，toggleClass是最為方便的。
但是?。?！
這種切換方法不能切換你要觸發(fā)的JS事件，
畢竟，我們畫按鈕是為了完成某些功能，
所以我采用的是這種方式,但也許并不是最好的
var zn=0;
$('.button').click(function(e){
if(zn==1){
$(this).removeClass("on").addClass("off");
//此處可填要觸發(fā)的事件
zn=0;
}else{
$(this).removeClass("off").addClass("on");
//此處可填要觸發(fā)的事件
zn=1;
}
});
到此，一個(gè)完整的開關(guān)按鈕就繪制完成了
感謝你能花3~5分鐘的時(shí)間閱覽我不專業(yè)的教程
PS:昨天要繪制一個(gè)按鈕控制燈泡的開關(guān)（實(shí)際上就是切換背景圖片），然后我四周一看，看到了墻壁上的一個(gè)公牛開關(guān)，既然是控制電燈的，我就想玩一玩仿真開關(guān)，忍著中午的睡意，還真勉強(qiáng)的給繪制出來了
繪制過程并不復(fù)雜，我也就不細(xì)說了，貼下效果圖和代碼，感興趣的可以自行看一下
仿真開關(guān).jpg
仿真-2.jpg
PS:我引用了一個(gè)初始化的CSS文件，可能需要
box-sizing:border-box;
<style type="text/css">
/*開關(guān)的輪廓*/
.button{
display: block;
position: relative;
width:160px;
height:180px;
border-radius: 5px;
background-color: #f1f1f1;
}
.button2{
display: block;
position: relative;
width:160px;
height:180px;
border-radius: 5px;
background-color: #f1f1f1;
}
/*指示燈*/
.indicate{
display: block;
position: absolute;
margin:60px 0 0 70px;
width: 20px;
height: 4px;
border-radius: 2px;
background-color: #A8C1C2;
z-index: 1;
transition: all 200ms;
}
.indicate_yes{
margin:69px 0 0 70px;
background-color: #A3D7E7;
}
/*開關(guān)內(nèi)部的小按鈕*/
.button:after{
display: block;
position: absolute;
top:40px;
bottom: 40px;
left:20px;
right:20px;
line-height: 52px;
border:1px solid #FFF;
transition: all 200ms;
}
.button2:after{
display: block;
position: absolute;
top:49px;
bottom: 31px;
left:20px;
right:20px;
line-height: 52px;
border:1px solid #FFF;
transition: all 200ms;
}
/*默認(rèn)狀態(tài)的小按鈕*/
.on:after {
content: '';
border-radius: 5px;
/* CSS3的顏色漸變凸顯按鈕的凸出感 */
background: linear-gradient(#fff, #f2f2f2 80%,#fff);
/* CSS3的影音的綜合應(yīng)用，繪制按鈕的邊緣，給予立體感 */
box-shadow: 0 1px 0 0 #fff,
0 3px 0.5px 0 #E7E9EA,
0 5px 0.5px 0 #DEDFDF,
0 6px 0.5px 0 #CCCCCD,
0 7px 0.5px 0 #C5C7C7,
0 8px 2px 0 #818283,
0 9px 2px 0 #A7A8A8;
}
/*關(guān)閉后的小按鈕*/
.off:after {
content: '';
border-radius: 5px;
background: linear-gradient(#fff, #f2f2f2 80%,#fff);
box-shadow: 0 -1px 0 0 #fff,
0 -3px 0.5px 0 #E7E9EA,
0 -5px 0.5px 0 #DEDFDF,
0 -6px 0.5px 0 #CCCCCD,
0 -7px 0.5px 0 #C5C7C7,
0 -8px 2px 0 #818283,
0 -9px 2px 0 #A7A8A8;
}
</style>
/* JS代碼 */
<script type="text/javascript">
$('.button').click(function(e) {
var toggle = this;
e.preventDefault();
$(toggle).toggleClass('on')
.toggleClass('off')
.toggleClass("button2");
//指示燈亮/滅
$(this).children(".indicate")
.toggleClass("indicate_yes");
});
//localStorage.clear();
</script>
