最近做一个简单移动web功能，可以左右滑动切换功能。如下图：

但是用户不知道可以滑动切换，所以需要提示用户可以滑动切换，那就添加了一个滑动动画。

滑动动画在最上层，所以当显示滑动提示显示的时候，用户切换就被它挡住了。所以想到pointer-events:none方法实现。

效果很好，达到我们的需求，同时移动端的支持情况也不错。提示只要在用户第一次进入这个页面的时候出现，不是每次都提示，不然会很烦的。因此使用localStorage，保存是否为第一次进入。

阅读扩展：

CSS3 pointer-events:none应用举例及扩展 http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/

CSS3教程:pointer-events属性值详解 http://www.poluoluo.com/jzxy/201109/142876.html

pointer-events 使用场景的更多相关文章

  1. 浏览器 Pointer Events

    前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po ...

  2. javascript code snippet -- Forwarding Mouse Events Through Layers

    Anyone who has worked with web apps has likely created a masking element at some point, and the grea ...

  3. ExtJS笔记 Using Events

    Using Events The Components and Classes of Ext JS fire a broad range of events at various points in ...

  4. touch pointer

    在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...

  5. 浏览器的统一指针事件：Pointer Event

    在早期的浏览器,输入的事件其实相对单纯,只有考虑到鼠标和键盘两种:而当时的鼠标事件,其实就是 click.mousedown.mouseup 等等的事件.但是当手机.平板开始流行时候,再移动装置上的主 ...

  6. 移动端Click300毫秒点击延迟的来龙去脉(转)

    原文地址:What Exactly Is….. The 300ms Click Delay 快速响应是所有 UI 实现的重中之重.研究表明,当延迟超过 100 毫秒,用户就能感受到界面的卡顿. 然而, ...

  7. click延时300ms的故事

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题 ...

  8. 移动端click事件延迟300ms到底是怎么回事，该如何解决？

    不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...

  9. fastclick.js解决移动端（ipad）点击事件反应慢问题

    参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...

  10. 移动端点击（click）事件延迟问题的产生与解决方法

    http://blog.csdn.net/xjun0812/article/details/64919063 问题的发现 上班做项目的时候碰到一个移动端项目,其中有个小游戏,相当于天上掉馅饼,用户需要 ...

随机推荐

  1. RBAC权限模型

    RBAC 现在大多数的管理系统都是基于RBAC开发的组织机构权限框架.所有的操作都是基于角色(Role)来完成的.我们先从需求的角度出发,来了解关于系统权限管理. 用户A和用户B都属于研发部,我们可以 ...

  2. eclipse软件创建servlet

    网上找了好多资料,eclipse创建servlet后,发到tomcat下发布,不能编译,生产class文件. 很多回答的都是一知半解,太气人了,看书.把资料找了一天,才发现是没有servlet-api ...

  3. 面向对象Part2

    `变量: 成员变量:又叫全局变量,定义在类中,方法外面. 1).类成员变量.   使用Static 2).实例成员变量.  没有使用Static. 局部变量:出了成员变量,其他的都是局部变量. 1). ...

  4. 7九章算法强化班全解--------Hadoop跃爷Spark

    ------------------------------------------------------------第七周:Follow up question 1,寻找峰值 寻找峰值 描述 笔记 ...

  5. LCQCL

    Linux Command Quick Check List 记录一些我Linux使用中的问题的解决方案. # 挂起: 几乎只对RAM供电以保存工作状态的极低能耗状态. 任意键或电源键退出(主要看RP ...

  6. linux du和df

    df.du和fdisk这三个常用命令:df用于检查文件系统磁盘占用情况,du检查磁盘空间占用情况,而fdisk用于磁盘分区. du,disk usage,是通过搜索文件来计算每个文件的大小然后累加,d ...

  7. WCF调用

    1.找到服务中的point终结点 2.添加服务地址就可以了

  8. display:inline-block会产生空隙

    display:inline-block会产生空隙 解决方法:font-size:0;letter-spacing:-4px

  9. JSONArray的应用

    从json数组中得到相应java数组,如果要获取java数组中的元素,只需要遍历该数组. /** * 从json数组中得到相应java数组 * JSONArray下的toArray()方法的使用 * ...

  10. CentOS安装gitLab服务器

    首先利用gitlab-install-el6.sh安装,比较简单: (出处:http://www.linuxidc.com/Linux/2013-06/85754.htm) 1:如果有条件,提供一台全 ...