基于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内容展示给用户。