web移動開發中如何實現圖標點擊態的蒙層效果

vincent_xyb 發布于2019-08-01 15:33 / 3375人閱讀

摘要：開發中經常需要加入點擊二態，即用戶點擊頁面某個部分時該部分的樣式進行相應的變化來相應用戶的點擊操作，這樣能夠帶來更好的用戶體驗，今天我們要討論的是如何給圖標加上點擊的二態效果。如果添加蒙層我們先用最容易想到的方法來實現這個需求。

webapp開發中經常需要加入點擊二態，即用戶點擊（tap）頁面某個部分時該部分的樣式進行相應的變化來相應用戶的點擊操作，這樣能夠帶來更好的用戶體驗，今天我們要討論的是如何給圖標加上點擊的二態效果。

先來看下需求吧~

如果判斷用戶的點擊操作？

這個應該不用多說，使用css的偽類選擇:active即可，這兒需要注意的是不要使用:hover,有些新手往往會直接使用:hover，一方面兼容性比較差，另一方面響應用戶操作表現時會有些怪異。

如果添加蒙層？

我們先用最容易想到的方法來實現這個需求。
我們可以添加一個和圖標同樣尺寸的dom蒙層元素，當圖標被點擊時我們利用JavaScript來顯示這個蒙層

html

雖然能夠實現，但是有一些問題
1、使用了額外的JavaScript來進行行為控制
2、需要添加額外的DOM結構
3、mask的尺寸樣式定義需要依賴于icon的尺寸

相信大家也想到了，我們可以使用css3中的::after來規避上面提到的一些問題
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;
}

現在好多了，HTML已經非常簡潔了，不需要定義額外的結構，而且不需要依賴JavaScript，但是css還是有一些問題：
1、需要改變.icon的position為relative
2、蒙層還是與icon的結構有依賴（比如border-radius:50%）
3、css代碼偏多，不夠簡潔

好了，讓我們快速結束吧，下面給出一種簡潔的方案，相信也不用進行解釋了

.icon:active {
    box-shadow: inset 0 0 1000px rgba(0, 0, 0, .5);
}

GPU云服務器云服務器 js如何實現3d效果移動web開發 web移動端開發 HTML5移動Web開發指南

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/49968.html

web移動開發中如何實現圖標點擊態的蒙層效果

摘要：開發中經常需要加入點擊二態，即用戶點擊頁面某個部分時該部分的樣式進行相應的變化來相應用戶的點擊操作，這樣能夠帶來更好的用戶體驗，今天我們要討論的是如何給圖標加上點擊的二態效果。如果添加蒙層我們先用最容易想到的方法來實現這個需求。 webapp開發中經常需要加入點擊二態，即用戶點擊（tap）頁面某個部分時該部分的樣式進行相應的變化來相應用戶的點擊操作，這樣能夠帶來更好的用戶體驗，今天我們...

haobowd 2019-08-29 11:06 評論0 收藏0
618購物節來襲，電商陪你浪浪浪

摘要：導航欄導航欄用的組件，設置其水平方向滑動，點擊到的字體會變換樣式。而且，導航欄點擊不同的類別會將主頁替換成不同的結構，這就要將最開始的主頁結構隱藏起來。前言購物節又要來啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴們準備好買買買了嗎！！！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進入正題...

selfimpr 2019-08-29 15:42 評論0 收藏0
618購物節來襲，電商陪你浪浪浪

摘要：導航欄導航欄用的組件，設置其水平方向滑動，點擊到的字體會變換樣式。而且，導航欄點擊不同的類別會將主頁替換成不同的結構，這就要將最開始的主頁結構隱藏起來。前言購物節又要來啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴們準備好買買買了嗎！！！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進入正題...

hellowoody 2019-08-22 18:00 評論0 收藏0
618購物節來襲，電商陪你浪浪浪

摘要：導航欄導航欄用的組件，設置其水平方向滑動，點擊到的字體會變換樣式。而且，導航欄點擊不同的類別會將主頁替換成不同的結構，這就要將最開始的主頁結構隱藏起來。前言購物節又要來啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴們準備好買買買了嗎！！！讓我看看我還多少余額哈！（滿心期待(*￣︶￣)）（10秒后......）好吧我還是寫個電商小程序過過癮好了。[冷漠臉]咳咳，讓我們進入正題...

MarvinZhang 2019-08-02 10:41 評論0 收藏0
禁止蒙層底部頁面跟隨滾動

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

shiyang6017 2019-08-02 15:59 評論0 收藏0