h5实现上下滑动切页

安卓系统下正常使用，ios系统下无法滑动切页，那位大神可以找到问题，多谢大佬

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>教师用户指导手册</title><style>html,body,h2 {margin: 0;padding: 0;}html,body,#wraper,#content {width: 100%;height: 100%;}#wraper {overflow: hidden;}#content {transition: all 1s linear;}.page {width: 100%;height: 100%;background-repeat: no-repeat;background-size: 100% 100%;-webkit-background-size: 100% 100%;}#page1 {background-image: url('../image/tone.png');}#page2 {background-image: url('../image/tsecond.png');}#page3 {background-image: url('../image/tthird.png');}</style>
</head>
<body>
<div id="wraper"><div id="content"><div class="page" id="page1"></div><div class="page" id="page2"></div><div class="page" id="page3"></div></div>
</div>
<script>var wraper = document.getElementById('wraper'),content = document.getElementById('content');    //滑动容器var itemHeight = wraper.offsetHeight;                //滑动item高度var index = 0;                                       //滑动计数var moveY,                                           //滑动距离endY,                                            //滑动停止的Y坐标startY;                                          //滑动开始的Y坐标// content.style.height = (itemHeight * 3) + 'px'// 触摸开始function boxTouchStart(e) {var touch = e.touches[0];console.log(touch);startY = touch.pageY;endY = content.style.webkitTransform;if(!endY){endY = 0;}else{endY = parseInt(endY.replace('translateY(',''))}}// 触摸结束function boxTouchEnd(e) {console.log(e)}// 触摸移动function boxTouchMove(e) {var touch = e.touches[0];moveY = touch.pageY - startY;teacherGuild = Number(e.target.id.split('page')[1])//下一页if(moveY < 0) {if(teacherGuild == 19) {return false;}content.style.webkitTransform = 'translateY(-'+(itemHeight*teacherGuild)+'px)'}//上一页else if(moveY > 0) {if(teacherGuild == 1) {return false;}content.style.webkitTransform = 'translateY('+(itemHeight+endY)+'px)'}}content.addEventListener('touchstart', boxTouchStart, false )content.addEventListener('touchmove', boxTouchMove, false)content.addEventListener('touchend', boxTouchEnd, false)
</script>
</body>
</html>

h5实现上下滑动切页相关推荐

简单零基础学会H5移动端滑动翻页效果
这篇文章教大家如何使用原生js和少量css3动画来实现HTML5的翻页效果,我会尽量讲得细一点,让零基础的同学也能学会这个简单的案例. 先来看下html的布局代码: index.html 一个div包 ...
H5 左右滑屏切页原理
采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 实现原理手指在屏幕上滑动时,页面跟 ...
手机UC禁止左右滑动切页
手机UC 左右滑动时会切换页面,禁止的方法其一为阻止[document]的 [touchmove]事件的默认操作, 其次就是调用,UC API 代码如下: var xStart,xEnd,ySt ...
h5滚动时侧滑出现_HTML5移动端触摸事件以及滑动翻页效果
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
移动端H5页面，上下滑动翻页
移动端H5页面,上下滑动翻页向上滑动进入下一页 , 当前页(加CSS样式outTop)向上移动移出窗口 ,下一页(加CSS样式inTop)向上移动进入窗口向下滑动进入前一页 , 当前页(加CSS样 ...
提升html5的性能体验系列之一避免切页白屏
窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿. 在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模 ...
vue实现上下滑动翻页_基于vue实现上下滑动翻页效果
18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...
滑动翻页效果实现和移动端click事件问题
前述本文很短~ 主要是为了总结和讲述移动端click和js事件机制导致的一个问题. (:咳咳,其实几句话就能写完的还要水一篇文章,不愧是我- 正文最近做了一个小活动,里面要用到一个效果:滑动翻页. ...
launcher切页动画
launcher切页动画刚工作的时候,还是launcher4.4,好像有很多切页特效可以选,重写切页特效类可以自己实现切页效果. 太久不搞launcher,忘记在哪实现切页特效了,比如什么外盒子.内 ...

h5实现上下滑动切页

h5实现上下滑动切页相关推荐

最新文章

热门文章