亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

web移動(dòng)開發(fā)中如何實(shí)現(xiàn)圖標(biāo)點(diǎn)擊態(tài)的蒙層效果

haobowd / 721人閱讀

摘要：開發(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é)構(gòu)，而且不需要依賴JavaScript，但是css還是有一些問題：
1、需要改變.icon的position為relative
2、蒙層還是與icon的結(jié)構(gòu)有依賴（比如border-radius:50%）
3、css代碼偏多，不夠簡潔

好了，讓我們快速結(jié)束吧，下面給出一種簡潔的方案，相信也不用進(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://www.ezyhdfw.cn/yun/111426.html

相關(guān)文章

  • web移動(dòng)開發(fā)中如何實(shí)現(xiàn)圖標(biāo)點(diǎn)擊態(tài)的蒙層效果

    摘要：開發(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)，今天我們...

    vincent_xyb 評(píng)論0 收藏0

  • 618購物節(jié)來襲，電商陪你浪浪浪

    摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動(dòng)，點(diǎn)擊到的字體會(huì)變換樣式。而且，導(dǎo)航欄點(diǎn)擊不同的類別會(huì)將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。 前言 購物節(jié)又要來啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻。∫路蛘哿耍。⌒』锇閭儨?zhǔn)備好買買買了嗎?。。∽屛铱纯次疫€多少余額哈?。M心期待(*￣︶￣)）（10秒后......）好吧我還是寫個(gè)電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...

    selfimpr 評(píng)論0 收藏0

  • 618購物節(jié)來襲，電商陪你浪浪浪

    摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動(dòng)，點(diǎn)擊到的字體會(huì)變換樣式。而且，導(dǎo)航欄點(diǎn)擊不同的類別會(huì)將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。 前言 購物節(jié)又要來啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻?！衣服打折了?。⌒』锇閭儨?zhǔn)備好買買買了嗎?。。∽屛铱纯次疫€多少余額哈?。M心期待(*￣︶￣)）（10秒后......）好吧我還是寫個(gè)電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...

    hellowoody 評(píng)論0 收藏0

  • 618購物節(jié)來襲，電商陪你浪浪浪

    摘要：導(dǎo)航欄導(dǎo)航欄用的組件，設(shè)置其水平方向滑動(dòng)，點(diǎn)擊到的字體會(huì)變換樣式。而且，導(dǎo)航欄點(diǎn)擊不同的類別會(huì)將主頁替換成不同的結(jié)構(gòu)，這就要將最開始的主頁結(jié)構(gòu)隱藏起來。 前言 購物節(jié)又要來啦?。。ㄈ龌ㄈ龌ǎ。┝闶炒蛘劾玻?！衣服打折了??！小伙伴們準(zhǔn)備好買買買了嗎?。?！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個(gè)電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進(jìn)入正題...

    MarvinZhang 評(píng)論0 收藏0

  • 禁止蒙層底部頁面跟隨滾動(dòng)

    摘要：但是，在蒙層元素中滑動(dòng)的時(shí)候，滑到內(nèi)容的盡頭時(shí)，再繼續(xù)滑動(dòng)，蒙層底部的頁面會(huì)開始滾動(dòng)，顯然這不是我們想要的效果，因此需要阻止這種行為。部分安卓機(jī)型以及中，無法無法阻止底部頁面滾動(dòng)。為蒙層容器節(jié)點(diǎn)簡單粗暴，滾動(dòng)時(shí)底部頁面也無法動(dòng)彈了。 場(chǎng)景概述 彈窗是一種常見的交互方式，而蒙層是彈窗必不可少的元素，用于隔斷頁面與彈窗區(qū)塊，暫時(shí)阻斷頁面的交互。但是，在蒙層元素中滑動(dòng)的時(shí)候，滑到內(nèi)容的盡頭時(shí)...

    shiyang6017 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<