webapp开发中经常需要加入点击二态,即用户点击(tap)页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作,这样能够带来更好的用户体验,今天我们要讨论的是如何给图标加上点击的二态效果。

先来看下需求吧~

如果判断用户的点击操作?

这个应该不用多说,使用css的伪类选择:active即可,这儿需要注意的是不要使用:hover,有些新手往往会直接使用:hover,一方面兼容性比较差,另一方面响应用户操作表现时会有些怪异。

如果添加蒙层?

我们先用最容易想到的方法来实现这个需求。
我们可以添加一个和图标同样尺寸的dom蒙层元素,当图标被点击时我们利用JavaScript来显示这个蒙层

html

<div class="wrapper">
<i class="icon"></i>
<i class="mask"></i>
</div>

虽然能够实现,但是有一些问题
1、使用了额外的JavaScript来进行行为控制
2、需要添加额外的DOM结构
3、mask的尺寸样式定义需要依赖于icon的尺寸

相信大家也想到了,我们可以使用css3中的::after来规避上面提到的一些问题
html

<i class="icon"></i>

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);
}

web移动开发中如何实现图标点击态的蒙层效果的更多相关文章

  1. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  2. WEB前端开发中的图片压缩

    web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的 ...

  3. Web前端开发中的MCRV模式(转)

    作者: izujian  来源: baiduux 摘要:针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为 基础,结 ...

  4. Web前端开发中的小错误

    Web前端开发中的小错误 错误1:表单的label标签跟表单字段没有关联 利用“for”属性允许用户单击label也可以选中表单中的内容.这可以扩大复选框和单选框的点击区域,非常实用. 错误2:log ...

  5. Java Web应用开发中的一些概念

    最近在学习Java Web,发现Java Web的概念很多,而且各个概念之间的关系也挺复杂,本篇博客把这些关系总结于此,主要参考的博客附在文章末尾. 概念 服务器 服务器,硬件角度上说就是一台高性能的 ...

  6. px em rem在WEB前端开发中的区别

    我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需 ...

  7. web前端开发中的浏览器兼容性总结

    1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...

  8. Web应用开发中的几个问题

    Introduction 由于Ajax技术在Gmail中的成功应用和高性能的V8引擎的推出使得编写Web应用变得流行 起来,使用前端技术也可以编写具有复杂交互的应用.相对于native应用,Web应用 ...

  9. WEB前端开发中的SEO注意点

    近几年来,SEO在国内得到了蓬勃的发展,其中很多的SEO技术越来越体现在web前端的一些细节上.要做好SEO,WEB前端这一块也要做必不可少的优化. 这就要求我们WEB前端工程师在开发页面的时候,要写 ...

随机推荐

  1. LeetCode-008-字符串转换整数 (atoi)

    字符串转换整数 (atoi) 题目描述:请你来实现一个 myAtoi(string s) 函数,使其能将字符串转换成一个 32 位有符号整数(类似 C/C++ 中的 atoi 函数). 函数 myAt ...

  2. 记一次NAS故障分析(ZFS NFS)

    问题: 使用vdbench进行单层100w目录,每个目录30个文件,共3000w文件读写时,在创建文件得时候IO会出现断断续续得情况. 分析过程: 1.  nfs抓包分析 使用vdbench创建一个文 ...

  3. javaScript阻止浏览器F5刷新

    1 <script type="text/javascript"> 2 //禁止用F5键 3 document.onkeydown = function (e) { 4 ...

  4. dopamine源码解析之dqn_agent

    目录 epsilon函数 DQNAgent构造函数核心参数 DQNAgent核心函数 tf.make_template 核心数据流图 epsilon函数 linearly_decaying_epsil ...

  5. 采用 DIV+CSS 布局网页练习

    实验四:采用 DIV+CSS 布局网页练习 实验目的: 熟悉 DIV+CSS 布局网页的方法 实验要求: 1.制作一个完整网页和一个 css 文件: 2.在网页中采用 DIV+CSS 布局 4 个以上 ...

  6. LGP5992题解

    贪心和DP一样,上来先找规律 考虑一种特殊情况:菊花图. 很容易发现这是小学数学题,排序后取中点. 来考虑另一种情况:深度为 3 的完全二叉树. 假设这颗完全二叉树的节点编号是按照线段树编号的,给定权 ...

  7. Gin 09 HTTP 重定向

    gin http 重定向有两种方法,重写url 和 不重写的跳转.两种方法,gin 通过两个内置方法实现: demo package main import ( "github.com/gi ...

  8. linux命令管道工作原理与使用方法

    一.管道定义 管道是一种两个进程间进行单向通信的机制.因为管道传递数据的单向性,管道又称为半双工管道.管道的这一特点决定了器使用的局限性.管道是Linux支持的最初Unix IPC形式之一,具有以下特 ...

  9. CF1556F Sports Betting (状压枚举子集DP)

    F 对于一张比赛图,经过缩点,会得到dag,且它一定是transitive的,因此我们能直接把比赛图缩成一个有向链.链头作为一个强连通分量,里面的所有点都是胜利的 定义F(win)表示win集合作为赢 ...

  10. 网络爬虫笔记之http协议

    http协议和https协议: HTTP协议:HyperText Transfer Protocol,超文本传输协议,是一种发布和接收HTML页面的方法.服务器端口号是80. HTTPS协议:是HTT ...