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

pointer-events 使用场景

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

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

pointer-events 使用场景

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

pointer-events 使用场景

 

阅读扩展:

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

 

相关文章:

  • 2021-12-23
  • 2021-09-26
  • 2022-01-15
  • 2021-07-17
  • 2021-07-11
  • 2022-12-23
  • 2022-12-23
  • 2021-12-12
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-10-04
  • 2022-01-12
  • 2021-06-11
相关资源
相似解决方案