数码资讯
HTML5单页手动滑动屏切换原理
H5 single page gesture slide panel switch is implemented by HTML5 touch event (Touch) and CSS3 animation (Transform, Transition). 效果如下所示。本文简要介绍了它的实现原理
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
H5 single page gesture slide panel switch is implemented by HTML5 touch event (Touch) and CSS3 animation (Transform, Transition). 效果如下所示。本文简要介绍了它的实现原理和主要思想。
1。实现原理
假设有5个页面，每个页面占100%的屏幕宽度，创建一个DIV视口的容器，它的宽度（宽度）设置为500%，那么5的页面装载容器，和5页拆分整个容器，并将容器的默认位置为0，溢出设置隐藏这是默认的屏幕，显示的第一页。
xml代码将内容复制到剪贴板。
- 1页
- 2页
- 3页
- 4页
- 5页
CSS样式：
xml代码将内容复制到剪贴板。
视口{。
宽度：500%；
身高：100%；
显示：WebKit的盒子；
溢出：隐藏；
指针事件：无；
WebKit的变换：translate3d（0,0,0）；
背面的可见性：隐藏；
职位：相对；
}
注册touchstart touchmove和touchend事件时，手指在屏幕上滑动，使用CSS3变换建立视口实时定位，例如显示一页第二，设置视口变换：translate3d（100%，0,0），这里我们使用translate3d代替translatex，translate3d可以主动开启手机GPU加速渲染页面，滑动更顺畅。
2，主要思想
把手指放在屏幕上，滑动和离开屏幕是一个完整的操作，相应的操作触发以下事件：
手指在屏幕上：ontouchstart
滑动手指在屏幕上：ontouchmove
手指从屏幕：ontouchend
我们需要捕获触摸事件的三个阶段来完成页面滑动：
Ontouchstart：初始化变量，记录手指的位置，并记录当前时间
xml代码将内容复制到剪贴板。
你的手指应该在屏幕上吗。
Document.addEventListener（touchstart
E.preventDefault（）；
VaR触摸= e.touches { 0 }；
touch.pagex startx =；
touch.pagey初始位置=；
initialpos =当前位置； / /初始位置滑动前
viewport.style.webkittransition = ； / /取消动画
，=新（日期）（的时间）； / /手指按记录开始时间
ismove = false； / /是否滑
}绑定（此）、false）；
ontouchmove：获取当前位置，计算出屏幕上的手指移动差Δx，然后将页面移动。
xml代码将内容复制到剪贴板。
如果你的手指穿过屏幕，请按手指移动/页。
Document.addEventListener（touchmove
E.preventDefault（）；
VaR触摸= e.touches { 0 }；
VaRΔx = touch.pagex - startx；
无功deltay = touch.pagey -初始位置；
如果x方向的位移大于y方向，那就是滑动。
如果（Math.abs（Δx）> Math.abs（deltay））{
movelength =Δx；
VaR翻译= initialpos +Δx； / /需要移动到的位置
/ /如果翻译> < 0或最大，超越边界表示的网页
如果（翻译= maxwidth）{
移动页面
this.transform.call（视口，翻译）；
ismove =真；
}
方向deltaX > 0 =右：左； / /判断手指滑动的方向
}
}绑定（此）、false）；
当ontouchend：手指离开屏幕，屏幕上结束的页面。首先，手指在屏幕上停留时间ΔT的计算。如果ΔT＜300ms考虑，认为这是快速滑动，但是恰恰相反，慢滑。快速滑行和慢速滑行的处理是不同的。
（1）如果它是快速滑动的，让当前页面完全位于屏幕中央（您需要计算当前页需要滑动多少）。
（2）如果滑动缓慢，还需要判断手指在屏幕上滑动的距离。如果滑动距离不超过屏幕宽度50%，那么它将返回到相反的方向，相反，它将停留在当前页面上。
xml代码将内容复制到剪贴板。
在计算最后需要停留在哪一页时，手指从屏幕上移开。
Document.addEventListener（touchend
E.preventDefault（）；
var翻译= 0；
手指停留在计算时间的屏幕上
Δ=新的VaR（）GetTime（）-，；
如果（ismove）{ / /有左右滑动
使用动画使页面转换/幻灯片到最后位置
viewport.style.webkittransition =0.3s易WebKit变换；
如果（ΔT＜300）{ / /如果停留时间小于300ms，即快速滑动，无论是滑动的距离，留下来
翻译= = =右方向
当前位置-（页宽+ movelength）：工作单位+页宽movelength；
如果最后位置超过边界位置，则停留在边界位置。
translatetranslate =翻译> 00：翻译； / /左边界
translatetranslate =翻译：翻译<<最大最大； / /右边框
{ }人
如果滑动距离小于屏幕50%，则返回
如果（Math.abs（movelength） /纸宽＜0.5）{
翻译=当前位置movelength；
其他{ }
如果距离大于滑动屏幕 50%，则滑动到
翻译= = =右方向
当前位置-（页宽+ movelength）：工作单位+页宽movelength；
translatetranslate =翻译> 00：翻译；
translatetranslate =翻译<< maxwidth maxwidth：翻译；
}
}
执行滑动，使页面完全显示到屏幕上。
this.transform.call（视口，翻译）；
}
}绑定（此）、false）；
另外，你必须计算当前页面的页数，并设置当前页码。
xml代码将内容复制到剪贴板。
计算当前页面
pagenow = math.round（Math.abs（译）/纸宽）+ 1；
setTimeout（）{（）函数（
/ /设置数量，DOM需要在子线程中操作，否则会出现Caton
This.setPageNow（）；
}绑定（这个），100）；
其基本思想是。当然，在实际操作过程中还需要注意一些细节。这里就不详细，但可以体现在code.html5单页手势滑屏切换原理的一个小编辑为大家介绍这么多，希望对你有帮助！
1。实现原理
假设有5个页面，每个页面占100%的屏幕宽度，创建一个DIV视口的容器，它的宽度（宽度）设置为500%，那么5的页面装载容器，和5页拆分整个容器，并将容器的默认位置为0，溢出设置隐藏这是默认的屏幕，显示的第一页。
xml代码将内容复制到剪贴板。
- 1页
- 2页
- 3页
- 4页
- 5页
CSS样式：
xml代码将内容复制到剪贴板。
视口{。
宽度：500%；
身高：100%；
显示：WebKit的盒子；
溢出：隐藏；
指针事件：无；
WebKit的变换：translate3d（0,0,0）；
背面的可见性：隐藏；
职位：相对；
}
注册touchstart touchmove和touchend事件时，手指在屏幕上滑动，使用CSS3变换建立视口实时定位，例如显示一页第二，设置视口变换：translate3d（100%，0,0），这里我们使用translate3d代替translatex，translate3d可以主动开启手机GPU加速渲染页面，滑动更顺畅。
2，主要思想
把手指放在屏幕上，滑动和离开屏幕是一个完整的操作，相应的操作触发以下事件：
手指在屏幕上：ontouchstart
滑动手指在屏幕上：ontouchmove
手指从屏幕：ontouchend
我们需要捕获触摸事件的三个阶段来完成页面滑动：
Ontouchstart：初始化变量，记录手指的位置，并记录当前时间
xml代码将内容复制到剪贴板。
你的手指应该在屏幕上吗。
Document.addEventListener（touchstart
E.preventDefault（）；
VaR触摸= e.touches { 0 }；
touch.pagex startx =；
touch.pagey初始位置=；
initialpos =当前位置； / /初始位置滑动前
viewport.style.webkittransition = ； / /取消动画
，=新（日期）（的时间）； / /手指按记录开始时间
ismove = false； / /是否滑
}绑定（此）、false）；
ontouchmove：获取当前位置，计算出屏幕上的手指移动差Δx，然后将页面移动。
xml代码将内容复制到剪贴板。
如果你的手指穿过屏幕，请按手指移动/页。
Document.addEventListener（touchmove
E.preventDefault（）；
VaR触摸= e.touches { 0 }；
VaRΔx = touch.pagex - startx；
无功deltay = touch.pagey -初始位置；
如果x方向的位移大于y方向，那就是滑动。
如果（Math.abs（Δx）> Math.abs（deltay））{
movelength =Δx；
VaR翻译= initialpos +Δx； / /需要移动到的位置
/ /如果翻译> < 0或最大，超越边界表示的网页
如果（翻译= maxwidth）{
移动页面
this.transform.call（视口，翻译）；
ismove =真；
}
方向deltaX > 0 =右：左； / /判断手指滑动的方向
}
}绑定（此）、false）；
当ontouchend：手指离开屏幕，屏幕上结束的页面。首先，手指在屏幕上停留时间ΔT的计算。如果ΔT＜300ms考虑，认为这是快速滑动，但是恰恰相反，慢滑。快速滑行和慢速滑行的处理是不同的。
（1）如果它是快速滑动的，让当前页面完全位于屏幕中央（您需要计算当前页需要滑动多少）。
（2）如果滑动缓慢，还需要判断手指在屏幕上滑动的距离。如果滑动距离不超过屏幕宽度50%，那么它将返回到相反的方向，相反，它将停留在当前页面上。
xml代码将内容复制到剪贴板。
在计算最后需要停留在哪一页时，手指从屏幕上移开。
Document.addEventListener（touchend
E.preventDefault（）；
var翻译= 0；
手指停留在计算时间的屏幕上
Δ=新的VaR（）GetTime（）-，；
如果（ismove）{ / /有左右滑动
使用动画使页面转换/幻灯片到最后位置
viewport.style.webkittransition =0.3s易WebKit变换；
如果（ΔT＜300）{ / /如果停留时间小于300ms，即快速滑动，无论是滑动的距离，留下来
翻译= = =右方向
当前位置-（页宽+ movelength）：工作单位+页宽movelength；
如果最后位置超过边界位置，则停留在边界位置。
translatetranslate =翻译> 00：翻译； / /左边界
translatetranslate =翻译：翻译<<最大最大； / /右边框
{ }人
如果滑动距离小于屏幕50%，则返回
如果（Math.abs（movelength） /纸宽＜0.5）{
翻译=当前位置movelength；
其他{ }
如果距离大于滑动屏幕 50%，则滑动到
翻译= = =右方向
当前位置-（页宽+ movelength）：工作单位+页宽movelength；
translatetranslate =翻译> 00：翻译；
translatetranslate =翻译<< maxwidth maxwidth：翻译；
}
}
执行滑动，使页面完全显示到屏幕上。
this.transform.call（视口，翻译）；
}
}绑定（此）、false）；
另外，你必须计算当前页面的页数，并设置当前页码。
xml代码将内容复制到剪贴板。
计算当前页面
pagenow = math.round（Math.abs（译）/纸宽）+ 1；
setTimeout（）{（）函数（
/ /设置数量，DOM需要在子线程中操作，否则会出现Caton
This.setPageNow（）；
}绑定（这个），100）；
其基本思想是。当然，在实际操作过程中还需要注意一些细节。这里就不详细，但可以体现在code.html5单页手势滑屏切换原理的一个小编辑为大家介绍这么多，希望对你有帮助！
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。