素材牛VIP会员

原生touch单页面左右滑动

 所属分类:网页特效-焦点图/幻灯片,滑块和旋转,移动端特效

 浏览:293次-  下载:2次-  评论:1次-  发布时间:2019-03-25
原生touch单页面左右滑动兼容IE8
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多说明»
素材描述:原生单页面移动端touch左右滑动轮播图效果。
 标签:touch滑动

详细介绍

注:只适用移动端,请用手机或模拟器访问

H5单页面手势滑屏切换示例

- 手指在屏幕上滑动时,页面跟随移动

- 当手指离开屏幕时,计算手指在屏幕上停留的时间

- 如果停留时间小于300ms,则认为是快速滑动切换,页面切换到下一页

- 如果停留时间大于300ms,则认为是慢速滑动,慢速滑动按如下规则处理:

- 如果滑动距离小于屏幕宽度的50%,则回退到上一页

- 如果滑动距离大于屏幕宽度的50%,则切换到下一页 

对于多手指触摸操作:  

- 第一个手指触摸时,正常滑动  

- 第二个手指按下时,不做任何响应操作,继续原有的滑动  

- 当任意一个手指离开屏幕时,结束滑动,剩余的手指操作不做任何处理  

- 当第二个手指再次按下时,触发新的滑动开始,但由于获取的是touches[0],因此,第一个手指移动才会引起页面的滑动  

- 支持多手指同时按下时进行滑动

文件目录结构

  • css
    • ┝ app.css
  • dist
    • ┝ app.css
    • ┝ app.min.js
  • images
    • ┝ onepixel.png
  • ┝ index.html
  • js
    • ┝ app.js
  • ┝ README.md
  • views
    • ┝ pc.html

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:2
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)