HTML5要实现左右滑屏切换页面

cyx_33 2016-05-04 05:42:16

试了一个左右滑屏的可是是用div、ul做的，效果不满意，
请教一下滑屏跳到下一个页面的做法。

...全文

1541 6 打赏收藏转发到动态举报

写回复

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

cyx_33 2016-05-12

打赏
举报

回复

是不是swiper也是用div写在同一个html页面里面？

cyx_33 2016-05-12

打赏
举报

回复

有没有更具体一点的答案

cyx_33 2016-05-09

打赏
举报

回复

[quote=引用 1 楼 obliviousSing 的回复:] 是不是可以整个页面切换？

业余草 2016-05-08

打赏
举报

回复

找插件！滑动插件

1987andy 2016-05-05

打赏
举报

回复

ajax + css animation

obliviousSing 2016-05-05

打赏
举报

回复

插件？swiper, islider.js

项目中需要实现的一个需求是顶部有一个tab选择框,点选某一个tab的时候切换页面，并且支持手势滑动，左滑右滑可以同点选tab一样切换页面。根据项目中选用的ui组件cube-ui为基准查看了一下可实现的方案，比如可以直接用swipe或者是slide实现，但根据之前的实现方案来看，多少都会有些问题，尤其是在页面嵌套了很多层的垂直和水平滚动的情况下，会让滚动很不流畅。于是选用了移动端的touch事件...

转自：微点阅读（www.weidianyuedu.com）http://www.weidianyuedu.com/ H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的，效果图如下所示，本文简单说一下其实现原理和主要思路。 1、实现原理假设有5个页面，每个页面占屏幕100%宽，则创建一个DIV容器viewport，将其宽度(width) 设置为500%，然后将5个页面装入容器中，并让这5个页面平分整个容器，最后将..

H5现在可谓也是编程世界的主流，H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的，下面通过本文简单说一下其实现原理和主要思路，希望对大家有帮助。1、实现原理假设有5个页面，每个页面占屏幕100%宽，则创建一个p容器viewport，将其宽度(width) 设置为500%，然后将5个页面装入容器中，并让这5个页面平分...

采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的，效果图如下所示，本文简单说一下其实现原理和主要思路。实现原理手指在屏幕上滑动时，页面跟随移动当手指离开屏幕时，计算手指在屏幕上停留的时间如果停留时间小于300ms，则认为是快速滑动切换，页面切换到下一页如果停留时间大于300ms,则认为是慢速滑动，慢速滑动按如下规则处理：如果滑动距离小于屏幕宽度的50%，则回退到上一页如果滑动距离大于屏幕

假设有5个页面，每个页面占屏幕100%宽，则创建一个DIV容器viewport，将其宽度(width) 设置为500%，然后将5个页面装入容器中，并让这5个页面平分整个容器，最后将容器的默认位置设置为0,overflow设置为hidden,这样屏幕就默认显示第一个页面。(2)如果是慢速滑动，还需要判断手指在屏幕上滑动的距离，如果滑动的距离没有超过屏幕宽度50%，则要回退到上一页，相反则要停留在当前页面。(1)如果是快速滑动，则让当前页面完整的停留在屏幕中央(需要计算当前页面还有多少需要滑动)......

43,736

社区成员

5,567

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章