如何使用HTML5进行单页面手势滑屏切换
今天就跟大家聊聊有关如何使用HTML5进行单页面手势滑屏切换,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
创新互联建站主要从事成都网站建设、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务德保,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示
1、实现原理
假设有5个页面,每个页面占屏幕100%宽,则创建一个DIV容器viewport,将其宽度(width) 设置为500%,然后将5个页面装入容器中,并让这5个页面平分整个容器,最后将容器的默认位置设置为0,overflow设置为hidden,这样屏幕就默认显示第一个页面。
XML/HTML Code复制内容到剪贴板
页面-1