摘要:開發(fā)中經(jīng)常需要加入點(diǎn)擊二態(tài),即用戶點(diǎn)擊頁面某個(gè)部分時(shí)該部分的樣式進(jìn)行相應(yīng)的變化來相應(yīng)用戶的點(diǎn)擊操作,這樣能夠帶來更好的用戶體驗(yàn),今天我們要討論的是如何給圖標(biāo)加上點(diǎn)擊的二態(tài)效果。如果添加蒙層我們先用最容易想到的方法來實(shí)現(xiàn)這個(gè)需求。
webapp開發(fā)中經(jīng)常需要加入點(diǎn)擊二態(tài),即用戶點(diǎn)擊(tap)頁面某個(gè)部分時(shí)該部分的樣式進(jìn)行相應(yīng)的變化來相應(yīng)用戶的點(diǎn)擊操作,這樣能夠帶來更好的用戶體驗(yàn),今天我們要討論的是如何給圖標(biāo)加上點(diǎn)擊的二態(tài)效果。
先來看下需求吧~
如果判斷用戶的點(diǎn)擊操作?這個(gè)應(yīng)該不用多說,使用css的偽類選擇:active即可,這兒需要注意的是不要使用:hover,有些新手往往會(huì)直接使用:hover,一方面兼容性比較差,另一方面響應(yīng)用戶操作表現(xiàn)時(shí)會(huì)有些怪異。
如果添加蒙層?我們先用最容易想到的方法來實(shí)現(xiàn)這個(gè)需求。
我們可以添加一個(gè)和圖標(biāo)同樣尺寸的dom蒙層元素,當(dāng)圖標(biāo)被點(diǎn)擊時(shí)我們利用JavaScript來顯示這個(gè)蒙層
html
雖然能夠?qū)崿F(xiàn),但是有一些問題
1、使用了額外的JavaScript來進(jìn)行行為控制
2、需要添加額外的DOM結(jié)構(gòu)
3、mask的尺寸樣式定義需要依賴于icon的尺寸
相信大家也想到了,我們可以使用css3中的::after來規(guī)避上面提到的一些問題
html
css
.icon { ... position: relative border-raidus: 50%; } .icon::after { ... content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 50%; display: none; background: rgba(0, 0, 0, .5); } .icon:active::after { display: block; }
現(xiàn)在好多了,HTML已經(jīng)非常簡(jiǎn)潔了,不需要定義額外的結(jié)構(gòu),而且不需要依賴JavaScript,但是css還是有一些問題:
1、需要改變.icon的position為relative
2、蒙層還是與icon的結(jié)構(gòu)有依賴(比如border-radius:50%)
3、css代碼偏多,不夠簡(jiǎn)潔
好了,讓我們快速結(jié)束吧,下面給出一種簡(jiǎn)潔的方案,相信也不用進(jìn)行解釋了
.icon:active { box-shadow: inset 0 0 1000px rgba(0, 0, 0, .5); }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/49968.html
摘要:開發(fā)中經(jīng)常需要加入點(diǎn)擊二態(tài),即用戶點(diǎn)擊頁面某個(gè)部分時(shí)該部分的樣式進(jìn)行相應(yīng)的變化來相應(yīng)用戶的點(diǎn)擊操作,這樣能夠帶來更好的用戶體驗(yàn),今天我們要討論的是如何給圖標(biāo)加上點(diǎn)擊的二態(tài)效果。如果添加蒙層我們先用最容易想到的方法來實(shí)現(xiàn)這個(gè)需求。 webapp開發(fā)中經(jīng)常需要加入點(diǎn)擊二態(tài),即用戶點(diǎn)擊(tap)頁面某個(gè)部分時(shí)該部分的樣式進(jìn)行相應(yīng)的變化來相應(yīng)用戶的點(diǎn)擊操作,這樣能夠帶來更好的用戶體驗(yàn),今天我們...
摘要:導(dǎo)航欄導(dǎo)航欄用的組件,設(shè)置其水平方向滑動(dòng),點(diǎn)擊到的字體會(huì)變換樣式。而且,導(dǎo)航欄點(diǎn)擊不同的類別會(huì)將主頁替換成不同的結(jié)構(gòu),這就要將最開始的主頁結(jié)構(gòu)隱藏起來。 前言 購(gòu)物節(jié)又要來啦!!(撒花撒花!)零食打折啦!!衣服打折了!!小伙伴們準(zhǔn)備好買買買了嗎!!!讓我看看我還多少余額哈!(滿心期待(* ̄︶ ̄))(10秒后......)好吧我還是寫個(gè)電商小程序過過癮好了。[冷漠臉]咳咳,讓我們進(jìn)入正題...
摘要:導(dǎo)航欄導(dǎo)航欄用的組件,設(shè)置其水平方向滑動(dòng),點(diǎn)擊到的字體會(huì)變換樣式。而且,導(dǎo)航欄點(diǎn)擊不同的類別會(huì)將主頁替換成不同的結(jié)構(gòu),這就要將最開始的主頁結(jié)構(gòu)隱藏起來。 前言 購(gòu)物節(jié)又要來啦!!(撒花撒花!)零食打折啦!!衣服打折了!!小伙伴們準(zhǔn)備好買買買了嗎!!!讓我看看我還多少余額哈!(滿心期待(* ̄︶ ̄))(10秒后......)好吧我還是寫個(gè)電商小程序過過癮好了。[冷漠臉]咳咳,讓我們進(jìn)入正題...
摘要:導(dǎo)航欄導(dǎo)航欄用的組件,設(shè)置其水平方向滑動(dòng),點(diǎn)擊到的字體會(huì)變換樣式。而且,導(dǎo)航欄點(diǎn)擊不同的類別會(huì)將主頁替換成不同的結(jié)構(gòu),這就要將最開始的主頁結(jié)構(gòu)隱藏起來。 前言 購(gòu)物節(jié)又要來啦!!(撒花撒花!)零食打折啦!!衣服打折了!!小伙伴們準(zhǔn)備好買買買了嗎!!!讓我看看我還多少余額哈!(滿心期待(* ̄︶ ̄))(10秒后......)好吧我還是寫個(gè)電商小程序過過癮好了。[冷漠臉]咳咳,讓我們進(jìn)入正題...
摘要:但是,在蒙層元素中滑動(dòng)的時(shí)候,滑到內(nèi)容的盡頭時(shí),再繼續(xù)滑動(dòng),蒙層底部的頁面會(huì)開始滾動(dòng),顯然這不是我們想要的效果,因此需要阻止這種行為。部分安卓機(jī)型以及中,無法無法阻止底部頁面滾動(dòng)。為蒙層容器節(jié)點(diǎn)簡(jiǎn)單粗暴,滾動(dòng)時(shí)底部頁面也無法動(dòng)彈了。 場(chǎng)景概述 彈窗是一種常見的交互方式,而蒙層是彈窗必不可少的元素,用于隔斷頁面與彈窗區(qū)塊,暫時(shí)阻斷頁面的交互。但是,在蒙層元素中滑動(dòng)的時(shí)候,滑到內(nèi)容的盡頭時(shí)...
閱讀 1503·2021-11-22 09:34
閱讀 3320·2021-09-29 09:35
閱讀 562·2021-09-04 16:40
閱讀 2912·2019-08-30 15:53
閱讀 2582·2019-08-30 15:44
閱讀 2584·2019-08-30 14:10
閱讀 1328·2019-08-29 18:43
閱讀 2205·2019-08-29 13:26