Question

移动端网页触摸滑动整屏切换，就是比如有五张网页写好了，我要在手机QQ浏览器中打开第一张，然后手指左

移动端网页触摸滑动整屏切换，就是比如有五张网页写好了，我要在手机QQ浏览器中打开第一张，然后手指左滑切换到第二张网页，以此类推。怎么写？求具体Demo，最好是窗口也全屏

Answer 1

题主这个问题有这么两个理解方向：

1. 左划可以进行页面跳转

2. 左划可以在页面内进行样式更改从而实现类似于app开场的切换页面。

第一个方向：

你可以使用原生JS实现左划手势的判别，在ontouchstart和ontouchend事件中存储一个deltaX判断一个阀值，然后执行一个跳转方法。

不通过原生JS实现你也可以通过第三方库去实现，这里推荐两个：

1. hammerJS

2. Zepto + touch.js

第一个hammerJS是一个开源项目，我个人比较喜欢的触摸事件库，里面有提供panleft方法，同事还有和它平行的pandown,panright,panup这些是“左划右划上划下划”事件的捕捉，捕捉到事件之后就会运行回执方法，例如 reload() 或者 loadData()方法。

第二个是业内普遍使用的移动端库zeptoJS，touch.js是它的touch插件

第二个方向：

这个和第一个的实现原理是一样的，监听到事件，然后执行相应的方法。

这样做的难点在哪里呢？

第一个需要指明的就是自适应。基本上这种使用方法的页面都是整屏滚动的，实现方式也是较为一致：改变DOM的位置做动画去切换

示意图：

在操作的的事件调用去改变整个大容器的margin-left就可以实现这个效果了，难点就在于每一个小容器内部的自适应。当然，这些小容器的内部你可以放置一个iframe框去放其他的网页，这些就看你发挥了。

对于插件或者处理方法有疑问的请追问。

Answer 2

这个问题我最近刚刚好再学，用插件能解决，你说的是整屏切换吗

Answer 3

js touch事件 不能做五个页面 做一个页面 然后利用js的touch事件实现

Answer 4

这个应该是上一级跟下一级的切换吧

追答

叫面包屑吧

追问

面包屑不是导航吗

说原理没用啊，做一个给我看一下。说谁不会，不会写代码的人也会说原理！

而且不是上级和下级，是同级的

Answer 5

太高难了

追问

不难

追答

希望你能遇到懂的

追问

唉问题发了好几遍了

追答

祝你好运