一种基于CSS3实现H5端水平翻页的方法及设备技术

本发明专利技术提供的一种基于CSS3实现H5端水平翻页的方法及设备，通过CSS3的columns属性对H5端的当前页面进行分列；监听用户的触摸事件判断出滑动手势；根据判断结果通过CSS3的transform属性完成翻页操作，不仅能够降低H5端实现翻页功能的成本，还能够提高翻页的流畅性，从而提高用户体验。

【技术实现步骤摘要】
一种基于CSS3实现H5端水平翻页的方法及设备
本专利技术涉及计算机
，特别涉及一种基于CSS3实现H5端水平翻页的方法及设备。
技术介绍
H5端的小说站阅读模式大多采用上下滑动翻页的模式，而小说APP一般会提供上下滑动和左右滑动翻页两种模式，如果采用和APP一样的方式实现左右滑动存在较高的开发成本且体验不流畅。本专利通过CSS3提供的新属性以流畅高效的方式实现了H5端小说左右滑动翻页功能。
技术实现思路
(一)要解决的技术问题为了解决现有技术的上述问题，本专利技术提供一种基于CSS3实现H5端水平翻页的方法及设备，不仅能够降低H5端实现翻页功能的成本，还能够提高翻页的流畅性。(二)技术方案为了达到上述目的，本专利技术采用的一种技术方案为：一种基于CSS3实现H5端水平翻页的方法，包括步骤：S1、通过CSS3的columns属性对H5端的当前页面进行分列；S2、监听用户的触摸事件判断出滑动手势；S3、根据判断结果通过CSS3的transform属性完成翻页操作。为了达到上述目的，本专利技术采用的另一种技术方案为：一种基于CSS3实现H5端水平翻页的设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现以下步骤：S1、通过CSS3的columns属性对H5端的当前页面进行分列；S2、监听用户的触摸事件判断出滑动手势；S3、根据判断结果通过CSS3的transform属性完成翻页操作。(三)有益效果本专利技术的有益效果在于：通过CSS3的columns属性对H5端的当前页面进行分列；监听用户的触摸事件判断出滑动手势；根据判断结果通过CSS3的transform属性完成翻页操作，不仅能够降低H5端实现翻页功能的成本，还能够提高翻页的流畅性，从而提高用户体验。附图说明图1为本专利技术实施例的基于CSS3实现H5端水平翻页的方法流程图；图2为本专利技术实施例的基于CSS3实现H5端水平翻页的设备的整体结构示意图。【附图标记说明】1：基于CSS3实现H5端水平翻页的设备；2：存储器；3：处理器。具体实施方式为了更好的解释本专利技术，以便于理解，下面结合附图，通过具体实施方式，对本专利技术作详细描述。请参照图1，一种基于CSS3实现H5端水平翻页的方法，包括步骤：S1、通过CSS3的columns属性对H5端的当前页面进行分列；S2、监听用户的触摸事件判断出滑动手势；步骤S2具体为：通过监听用户的touchstart事件、touchmove事件和touchend事件判断出滑动手势。S3、根据判断结果通过CSS3的transform属性完成翻页操作。步骤S3具体为：根据判断结果通过CSS3的transform属性对当前页面进行平移，完成翻页操作。具体地，根据判断结果通过transform属性对当前页面中文本的父容器进行x轴上的平移，从而实现左右翻页的效果。还包括步骤S4：根据当前页面的平移距离判断页数。具体地，根据当前平移的距离判断用户位于的页数，从而完成滑动加载上/下一章的操作，便于提高用户体验。实施例二请参照图2，一种基于CSS3实现H5端水平翻页的设备1，包括存储器2、处理器3及存储在存储器2上并可在处理器3上运行的计算机程序，所述处理器3执行所述程序时实现实施例一中的各个步骤。以上所述仅为本专利技术的实施例，并非因此限制本专利技术的专利范围，凡是利用本专利技术说明书及附图内容所作的等同变换，或直接或间接运用在相关的
，均同理包括在本专利技术的专利保护范围内。本文档来自技高网...

【技术保护点】
1.一种基于CSS3实现H5端水平翻页的方法，其特征在于，包括步骤：/nS1、通过CSS3的columns属性对H5端的当前页面进行分列；/nS2、监听用户的触摸事件判断出滑动手势；/nS3、根据判断结果通过CSS3的transform属性完成翻页操作。/n

【技术特征摘要】
1.一种基于CSS3实现H5端水平翻页的方法，其特征在于，包括步骤：
S1、通过CSS3的columns属性对H5端的当前页面进行分列；
S2、监听用户的触摸事件判断出滑动手势；
S3、根据判断结果通过CSS3的transform属性完成翻页操作。


2.根据权利要求1所述的基于CSS3实现H5端水平翻页的方法，其特征在于，步骤S2具体为：
通过监听用户的touchstart事件、touchmove事件和touchend事件判断出滑动手势。


3.根据权利要求1所述的基于CSS3实现H5端水平翻页的方法，其特征在于，步骤S3具体为：
根据判断结果通过CSS3的transform属性对当前页面进行平移，完成翻页操作。


4.根据权利要求1所述的基于CSS3实现H5端水平翻页的方法，其特征在于，还包括步骤S4：
根据当前页面的平移距离判断页数。


5.一种基于CSS3实现H5端水平...

【专利技术属性】
技术研发人员：林谋洪，
申请(专利权)人：福州掌中云科技有限公司，
类型：发明
国别省市：福建;35