web移动开发中如何实现图标点击态的蒙层效果

vincent_xyb 发布于2019-08-01 15:33 / 3421人阅读

摘要：开发中经常需要加入点击二态，即用户点击页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作，这样能够带来更好的用户体验，今天我们要讨论的是如何给图标加上点击的二态效果。如果添加蒙层我们先用最容易想到的方法来实现这个需求。

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开发指南

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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