最近做一个简单移动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. 解决pip安装超时

    我们在使用python开发的时候总会需要安装很多第三方模块 比如我用flask搭建web, 需要很多第三方模块,比如flask-sqlalchemy, flask-bootstrap等等.而这些模块用 ...

  2. java 文件保存到本地

    private void savePic(InputStream inputStream, String fileName) { OutputStream os = null; try { Strin ...

  3. (转载)org.springframework.web.context.ContextLoaderListener

    http://www.yihaomen.com/article/java/471.htm 刚才手贱乱点了下,然后好像jar包不见了还是什么的,出现了这个错误,按照帖子说的,手动添加maven进去就好了

  4. oracle11g interval(numtoyminterval())自动创建表分区

    Oracle11g通过间隔分区实现按月创建表分区 在项目数据库设计过程中由于单表的数据量非常庞大,需要对表进行分区处理.由于表中的数据是历史交易,故按月分区,提升查询和管理. 由于之前对于表分区了解不 ...

  5. Android笔记：蓝牙

    if (!BTAdapter.isEnabled()) { //没有打开,就启动确认窗口询问用户是否打开 Intent i = new Intent(BluetoothAdapter.ACTION_R ...

  6. 【转】代码中特殊的注释技术——TODO、FIXME和XXX的用处

    (转自:http://blog.csdn.net/reille/article/details/7161942) 作者:reille 本博客网址:http://blog.csdn.net/reille ...

  7. Jmeter发送Java请求

    1.创建一个Java工程 2.把Jmeter的lib\ext目录下的ApacheJMeter_java.jar.ApacheJMeter_core.jar文件添加进该项目的Build Path 3.创 ...

  8. SQL注入以及如何防止和索引

    SQL注入产生的原因:程序开发过程中不注意规范书写sql语句和对特殊字符进行过滤,导致客户端可以通过全局变量POST和GET提交一些sql语句正常执行. 防止SQL注入: 1.开启配置文件中的magi ...

  9. Linux系统性能优化思路和方法

    #影响Linux性能的CPU.内存.磁盘.网络等因素分析1.系统硬件资源:CPU,多核与超线程消耗CPU的业务:动态WEB服务,Mail服务器2.内存:物理内存与swap的取舍,64操作系统消耗内存的 ...

  10. POJ 2718 Smallest Difference【DFS】

    题意: 就是说给你一些数,然后要求你使用这些数字组成2个数,然后求他们的差值最小. 思路: 我用的双重DFS做的,速度还比较快,其中有一个很重要的剪枝,若当前搜索的第二个数后面全部补零与第一个数所产生 ...