基于HTML5的界面交互及展示系统、方法与设计方案

本技术提供了一种基于HTML5的界面交互及展示系统、方法，该系统包括控件初始化模块等，所述控件初始化模块负责初始化控件，将页面div初始化为一个2乘以2的二维页面，并且给出配置入口，由用户定义页面之间的交互方式，并且生成配置文件保存；所述事件接收模块负责接收用户的操作事件，将相关的事件发送到数据处理模块；所述数据处理模块负责处理接收到的事件，将相应的页面元素放入二维布局的div中；所述缓存模块负责将已经展示过得页面元素及内容保存在本地客户端。本技术摆脱单一的操作方式，大大增强了Web的界面交互的用户体验。

权利要求书

1.一种基于HTML5的界面交互及展示系统，其特征在于，包括控件初始化模块、事件接收模块、数据处理模块、缓存模块、API接口模块、渲染模块、展示模块，所述控件初始化模块负责初始化控件，将页面div初始化为一个2乘以2的二维页面，并且给出配置入口，由用户定义页面之间的交互方式，并且生成配置文件保存；所述事件接收模块负责接收用户的操作事件，将相关的事件发送到数据处理模块；所述数据处理模块负责处理接收到的事件，将相应的页面元素放入二维布局的div中；所述缓存模块负责将已经展示过得页面元素及内容保存在本地客户端，所述API接口模块用于于数据库对接，提取所需页面元素；所述渲染模块负责将页面元素进行渲染，达到用户需要的视觉效果；所述展示模块负责将完整的HTML5内容展示给用户。

2.根据权利要求1所述的基于HTML5的界面交互及展示系统，其特征在于，所述二维页面在一个HTML5内容中做到上下与左右滑动自由切换，用户随意的定义交互方式，摆脱单一的模式。

3.根据权利要求1所述的基于HTML5的界面交互及展示系统，其特征在于，所述事件接收模块接收会时刻监听用户操作行为，当用户在电脑或者移动终端上做了交互行为，事件接收模块会立刻接收到交互事件，同时会将用户交互时滑动的距离与速度记录下来形成相关数据，并且将该交互事件相关信息传递给数据处理模块。

4.根据权利要求1所述的基于HTML5的界面交互及展示系统，其特征在于，所述数据处理模块会按照顺序给每一个页面都加上自定义的ID号作为页面唯一标识，如果即将展示的内容是缓存模块中不存在的，会通过所述API接口模块向数据库提取相关元素，并且将相关页面元素及内容放入所述缓存模块中。

5.一种基于HTML5的界面交互及展示方法，其特征在于，包括以下步骤：

步骤一：控件初始化模块初始化二维页面，读取制作内容时用户定义的页面交互配置文件，并且首页内容加载完成；通过API接口模块将首页展示

的内容从数据库中提取出来，通过数据处理模块填充进入左上角的页面div中，并且根据载入的配置文件，将与首页相关的其他页面内容填入相应的

二维页面div中；

步骤二：事件接收模块一直在监听用户行为，当用户通过设备进行操作，事件接收模块接收用户操作事件传递给数据处理模块；

步骤三：数据处理模块收到用户操作事件，根据交互方式，向API接口模块申请页面元素，API接口模块根据要求从数据库提取相关页面元素传递给数据处理模块，数据处理模块向二维页面div填充相关页面元素；

步骤四：页面元素填充结束后，渲染模块对二维页面进行渲染；

步骤五：渲染结束后，展示模块将用户操作之后的页面展现出来。

6.根据权利要求5所述的基于HTML5的界面交互及展示方法，其特征在于，所述步骤三中，数据处理模块需要通过页面ID向缓存模块获取填充的页面元素及内容是否已经存在，如果存在，则直接从缓存模块中提取，如果不存在，则通过API接口模块通过数据库提取数据。

技术说明书

基于HTML5的界面交互及展示系统、方法

技术领域

本技术涉及一种界面交互及展示系统、方法，具体地，涉及一种基于HTML5的界面交互及展示系统、方法。

背景技术

随着互联网的飞速发展，浏览器不再仅仅用来表示Web内容，随着HTML5的技术问世，Web进入了一个成熟的应用平台，在HTML5平台上，视频、音频、图像、动画以及交互都被标准化。HTML5可以让你摆脱对平台的依赖，用户打开浏览器，直接就可以访问你的应用，HTML5可以做到跨平台，多数核心代码不用重写，在许多地方都可以用到，包括移动应用、移动网站、PC网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。对于用户来说，提高了用户体验，加强了视觉感受，HTML5技术在移动端，能够让应用程序回归到网页，并对网页的功能进行扩展，用户不需要下载客户端或插件就能够观看视频、玩游戏，操作更加简单，用户体验更好。如今已进入后Web2.0时代，人机交互已经成为常态，不能满足于网页上简单的图片和文字展示，用户更希望能有更加丰富的界面交互方式。因此，为了迎合互联网技术的发展，本技术研发一种基于HTML5的界面交互技术及展示方法，由于HTML5的跨平台、跨终端的特性，也使该界面交互及展示方法具备了跨平台、跨终端的特性，并提供了适用于鼠标操作或适用于触摸屏操作的两种用户操作习惯，摆脱单一的操作方式，大大增强了Web的界面交互的用户体验。

技术内容

针对现有技术中的缺陷，本技术的目的是提供一种基于HTML5的界面交互及展示系统、方法，其由于HTML5的跨平台、跨终端的特性，也使该界面交互及展示方法具备了跨平台、跨终端的特性，并提供了适用于鼠标操作或适用于触摸屏操作的两种用户操作习惯，摆脱单一的操作方式，大大增强了Web的界面交互的用户体验。

根据本技术的一个方面，提供一种基于HTML5的界面交互及展示系统，其特征在于，包括控件初始化模块、事件接收模块、数据处理模块、缓存模块、API接口模块、渲染模块、展示模块，所述控件初始化模块负责初始化控件，将页面div初始化为一个2乘以2的二维页面，并且给出配置入口，由用户定义页面之间的交互方式，并且生成配置文件保存；所述事件接收模块负责接收用户的操作事件，将相关的事件发送到数据处理模块；所述数据处理模块负责处理接收到的事件，将相应的页面元素放入二维布局的div中；所述缓存模块负责将已经展示过得页面元素及内容保存在本地客户端，所述API接口模块用于于数据库对接，提取所需页面元素；所述渲染模块负责将页面元素进行渲染，达到用户需要的视觉效果；所述展示模块负责将完整的HTML5内容展示给用户。

优选地，所述二维页面在一个HTML5内容中做到上下与左右滑动自由切换，用户随意的定义交互方式，摆脱单一的模式。

优选地，所述事件接收模块接收会时刻监听用户操作行为，当用户在电脑或者移动终端上做了交互行为，事件接收模块会立刻接收到交互事件，同时会将用户交互时滑动的距离与速度记录下来形成相关数据，并且将该交互事件相关信息传递给数据处理模块。

优选地，所述数据处理模块会按照顺序给每一个页面都加上自定义的ID号作为页面唯一标识，如果即将展示的内容是缓存模块中不存在的，会通过所述API接口模块向数据库提取相关元素，并且将相关页面元素及内容放入所述缓存模块中。

本技术还提供一种基于HTML5的界面交互及展示方法，其特征在于，包括以下步骤：

步骤一：控件初始化模块初始化二维页面，读取制作内容时用户定义的页面交互配置文件，并且首页内容加载完成；通过API接口模块将首页展示的内容从数据库中提取出来，通过数据处理模块填充进入左上角的页面div中，并且根据载入的配置文件，将与首页相关的其他页面内容填入相应的二维页面div中；

步骤二：事件接收模块一直在监听用户行为，当用户通过设备进行操作，事件接收模块接收用户操作事件传递给数据处理模块；

步骤三：数据处理模块收到用户操作事件，根据交互方式，向API接口模块申请页面元素，API接口模块根据要求从数据库提取相关页面元素传递给数据处理模块，数据处理模块向二维页面div填充相关页面元素；

步骤四：页面元素填充结束后，渲染模块对二维页面进行渲染；

步骤五：渲染结束后，展示模块将用户操作之后的页面展现出来。

优选地，所述步骤三中，数据处理模块需要通过页面ID向缓存模块获取填充的页面元素及内容是否已经存在，如果存在，则直接从缓存模块中提取，如果不存在，则通过API接口模块通过数据库提取数据。

与现有技术相比，本技术具有如下的有益效果：由于HTML5的跨平台、跨终端的特性，也使该界面交互及展示方法具备了跨平台、跨终端的特性，并提供了适用于鼠标操作或适用于触摸屏操作的两种用户操作习惯，摆脱单一的操作方式，大大增强了Web的界面交互的用户体验。

附图说明

通过阅读参照以下附图对非限制性实施例所作的详细描述，本技术的其它特征、目的和优点将会变得更明显：

图1为本技术基于HTML5的界面交互及展示系统的原理框图。

具体实施方式

下面结合具体实施例对本技术进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本技术，但不以任何形式限制本技术。应当指出的是，对本领域的普通技术人员来说，在不脱离本技术构思的前提下，还可以做出若干变形和改进。这些都属于本技术的保护范围。

如图1所示，本技术基于HTML5的界面交互及展示系统包括控件初始化模块、事件接收模块、数据处理模块、缓存模块、API(Application Programming Interface，应用程序编程接口)接口模块、渲染模块、展示模块，所述控件初始化模块负责初始化控件，将页面div初始化为一个2乘以2的二维页面，并且给出配置入口，由用户定义页面之间的交互方式(例如：左右或者上下，翻页或者渐隐)，并且生成配置文件保存；所述事件接收模块负责接收用户的操作事件(Event)，将相关的事件发送到数据处理模块；所述数据处理模块负责处理接收到的事件，将相应的页面元素放入二维布局的div中；所述缓存模块负责将已经展示过得页面元素及内容保存在本地客户端，所述API接口模块用于于数据库对接，提取所需页面元素；所述渲染模块负责将页面元素进行渲染，达到用户需要的视觉效果；所述展示模块负责将完整的HTML5内容展示给用户。

二维页面可以在一个HTML5内容中做到上下与左右滑动自由切换，用户可以随意的定义交互方式，摆脱单一的模式，这样使用方便。

所述事件接收模块接收会时刻监听用户操作行为，当用户在电脑或者移动终端上做了交互行为(左右或者上下滑动)，事件接收模块会立刻接收到交

互事件，同时会将用户交互时滑动的距离与速度记录下来形成相关数据，并且将该交互事件相关信息传递给数据处理模块，这样及时反馈。

所述数据处理模块接收到交互事件相关信息之后，会判断交互事件的方向，分为四种情况：

一，如果交互是向上滑动(即浏览下面页面内容)，会将即将展示的页面元素填充在2乘以2页面div中的左上角div中，并且将展示页面的下一页元素填充在左下角div中，因为右上角与右下角内容与交互内容无关，所以不做任何操作。

二，如果交互是向下滑动(即浏览上面页面内容)，会将即将展示的页面元素填充在2乘以2页面div中的左下角div中，并且将展示页面的下一页元素填充在左上角div中，因为右上角与右下角内容与交互内容无关，所以不做任何操作。

三，如果交互是向左滑动(即浏览右面页面内容)，会将即将展示的页面元素填充在2乘以2页面div中的左上角div中，并且将展示页面的下一页元素填充在右上角div中，因为左下角与右下角内容与交互内容无关，所以不做任何操作。

四，如果交互是向右滑动(即浏览左面页面内容)，会将即将展示的页面元素填充在2乘以2页面div中的右上角div中，并且将展示页面的下一页元素填充在左上角div中，因为左下角与右下角内容与交互内容无关，所以不做任何操作。

数据处理模块会按照顺序给每一个页面都加上自定义的ID号作为页面唯一标识，如果即将展示的内容是缓存模块中不存在的，会通过所述API接口模块向数据库提取相关元素，并且将相关页面元素及内容放入所述缓存模块中，避免重复读取数据库造成资源浪费。

所述渲染模块会根据定义将重新填充元素的div进行渲染，满足用户的需求，并且通过展示模块将用户需要的页面呈现出来。

本技术基于HTML5的界面交互及展示方法包括以下步骤：

步骤一：控件初始化模块初始化二维页面，读取制作内容时用户定义的页面交互配置文件，并且首页内容加载完成；通过API接口模块将首页展示的内容从数据库中提取出来，通过数据处理模块填充进入左上角的页面div中，并且根据载入的配置文件，将与首页相关的其他页面内容填入相应的二维页面div中；

步骤二：事件接收模块一直在监听用户行为，当用户通过设备(电脑或者移动终端)进行操作，事件接收模块接收用户操作事件(上下或者左右滑动)传递给数据处理模块；

步骤三：数据处理模块收到用户操作事件，根据交互方式，向API接口模块申请页面元素，API接口模块根据要求从数据库提取相关页面元素传递给数据处理模块，数据处理模块向二维页面div填充相关页面元素；具体来说，数据处理模块需要通过页面ID向缓存模块获取填充的页面元素及内容是否已经存在，如果存在，则直接从缓存模块中提取，如果不存在，则通过API接口模块通过数据库提取数据；

步骤四：页面元素填充结束后，渲染模块对二维页面进行渲染；

步骤五：渲染结束后，展示模块将用户操作之后的页面展现出来。

本技术可为日益丰富的HTML5内容提供丰富的、互动性强的界面交互及展示，使得HTML5内容的视觉呈现更为丰富和精美，增强HTML5内容的表现能力，从而增强其用户粘性。

以上对本技术的具体实施例进行了描述。需要理解的是，本技术并不局限于上述特定实施方式，本领域技术人员可以在权利要求的范围内做出各种变形或修改，这并不影响本技术的实质内容。