整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
圖1
圖2
圖3
就愛(ài)UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴
信很多前端開(kāi)發(fā)人員都會(huì)遇到boss讓修改checkbox和radio樣式，畢竟自帶的樣式太丑了。后來(lái)我們發(fā)現(xiàn)修改自帶樣式并不是那么容易，最后直接使出殺手锏——點(diǎn)擊之后替換圖片。
今天教大家一種方法，不用替換圖片，隨意修改樣式。還是先看效果圖：
先講一下原理：將input和label綁定，我們會(huì)發(fā)現(xiàn)，點(diǎn)擊label的時(shí)候也會(huì)觸發(fā)點(diǎn)擊input事件，所以秘訣就是把input隱藏掉，向label添加偽元素 :before替代前面的容器，：after替代選中之后的標(biāo)志。通過(guò)修改:before和:after樣式，就能實(shí)現(xiàn)各式各樣的單選復(fù)選框了。
一、修改普通復(fù)選框樣式
廢話不多說(shuō)，直接上代碼：
上面代碼中“+”代表選中該元素后一個(gè)兄弟元素，“：checked”表示選中狀態(tài)。
二、修改單選框樣式
這里要注意一下，單選范圍內(nèi)所有的name要保持一致。
三、自定義其他樣式
這個(gè)舉個(gè)實(shí)現(xiàn)開(kāi)關(guān)性質(zhì)的樣式提供參考，更多樣式，需要自己去探索發(fā)現(xiàn)。
四、總結(jié)
以后再也不用擔(dān)心修改單選復(fù)選框樣式問(wèn)題了，樣式想怎么改就怎么改。給大家留個(gè)問(wèn)題：input和label綁定的樣式還有很多，舉一反三，思索一下還能應(yīng)用在哪方面？
有問(wèn)題，歡迎隨時(shí)聯(lián)系我，我是竹風(fēng)，希望與各位前端愛(ài)好者共同學(xué)習(xí)交流！
圖片切換在目前的web或者app應(yīng)用中早已不是新鮮事，尤其是在App首頁(yè)頂部推薦中會(huì)經(jīng)常用到，今天就給大家推薦幾款Github上開(kāi)源的圖片滑動(dòng)切換庫(kù)。
slick一款功能異常強(qiáng)大的圖片切換效果庫(kù)，支持各種動(dòng)畫(huà)效果和樣式，運(yùn)行效果如下圖所示。
slick運(yùn)行效果
目前slick在Github上的信息如下圖所示。
github上的信息
目前star數(shù)已經(jīng)達(dá)到了18k+，可以說(shuō)是非常火熱的一個(gè)開(kāi)源庫(kù)了。
安裝
可以通過(guò)npm或者bower進(jìn)行安裝。
安裝
實(shí)現(xiàn)
首先看下html代碼，是一個(gè)很簡(jiǎn)單的div代碼塊。
html代碼
然后是js代碼進(jìn)行調(diào)用，其中包含一些常用的配置。
js代碼調(diào)用
slick庫(kù)唯一的缺點(diǎn)就是依賴于jQuery，現(xiàn)在已經(jīng)沒(méi)人喜歡用jQuery了，希望slick庫(kù)能脫離jQuery，那樣就會(huì)更受歡迎了。
swipe是一款輕量級(jí)的圖片滑動(dòng)切換的庫(kù)，對(duì)移動(dòng)端表現(xiàn)出完美的支持，運(yùn)行效果如下。
swipe插件運(yùn)行效果
目前swipe在Github上的信息如下所示。
swipe在github上的信息
安裝
swipe同樣支持npm和bower安裝的方式。
安裝
使用
使用swipe插件也非常的簡(jiǎn)單，首先定義html元素。
html元素
然后定義CSS樣式。
CSS樣式
最后通過(guò)js代碼進(jìn)行調(diào)用。
js代碼調(diào)用
今天這篇文章給大家總結(jié)了兩個(gè)非常實(shí)用的圖片滑動(dòng)切換插件，分別支持PC端和移動(dòng)端，歡迎自己動(dòng)手體驗(yàn)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
