最近做一个简单移动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. angularJS绑定数据时自动转义html标签

    angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...

  2. BZOJ 2096: [Poi2010]Pilots

    Description 求一个最长的序列,最大值最小值之差不超过 \(k\) . Sol 单调队列. 一个队列直接上就行.. Code /******************************* ...

  3. C#夯实基础之多线程三:线程的优先级

    一.为什么需要优先级--线程调度的问题 在现实生活中,优先级是一个很常见的现象:在火车站,如果你是孕妇,你是可以走进站中的专门绿色通道的,可以提前上火车以免拥挤:火警119匪警110出警的时候,都是人 ...

  4. Django模板与Vue.js冲突问题

    参考: https://my.oschina.net/soarwilldo/blog/755984 方法1:修改vue.js的默认的绑定符号 Vue.config.delimiters = [&quo ...

  5. [转载] Java CheckBoxTree

    代码基本上是copy的.只是在使用上有一些自己的想法. 先上code吧! 虽然别的地方也有.但是还是转一份给自己. 出处:http://blog.csdn.net/joy_125/article/de ...

  6. vue.js 接收url参数

    1) 路由配置传参方式 在配置路由时 例如 "/firewall/authorize/:uid/:uname/:token" 页面url为 http://XXX.com/firew ...

  7. SpringMVC后台接收list类型的数据的实现方式

    一.背景 最近在做一些东西的时候,遇到一个需要Springmvc后台接收list类型数据的需求,几经辗转才完美解决了这个问题,今天记下来方便以后使用,也分享给需要的小伙伴们~ 二.实现方式 1.实现方 ...

  8. 模拟搭建Web项目的真实运行环境（五）

    一.开启IIS功能 刚安装完的server2008是没有默认开启IIS功能,在这里简单介绍一下如何开启IIS. 步骤: 1. 打开控制面板,选中[程序] 2. 在[程序和功能]下面,选择[打开或关闭w ...

  9. iOS开发常用校验

    一.身份证号码校验 + (BOOL)cheakIdentityCard: (NSString *)value { value = [value stringByTrimmingCharactersIn ...

  10. javase-->基础知识（三）

    1.方法 普通方法:4个必要,1个可选 1):必须有返回值类型,没有返回值用void表示 2):必须有名字 3):必须有()和形参 4):必须有{}方法体 5):可选static,表示静态的方法,可以 ...