前端页面生成方法、装置及计算机可读介质

技术领域

本发明涉及计算机技术领域，特别涉及前端页面生成方法、装置及计算机可读介质。

背景技术

前端页面是用户与系统直接直接交互的渠道，前端页面直接影响着用户的使用体验，如今良好的用户体验的地位越来越重要，因此对前端界面的交互体验提出了很高要求。

目前，前端界面的展示通常都是2D平面的单一交互，随着浏览器的不断进步和更新，这样的前端界面由于视觉效果不佳且交互方式单一，已经无法为用户提供良好的交互体验。

发明内容

本发明实施例提供了前端页面生成方法、装置及计算机可读介质，能够提高前端页面的交互体验。

第一方面，本发明实施例提供了前端页面生成方法，包括：

设计所述前端页面中各个页面元素的百分比；

通过层叠样式表CSS3将所述前端页面中的各个所述页面元素建立透视效果；

通过CSS3设置各个所述页面元素围绕所述前端界面形成3D圆弧；

设置所述前端页面中的各个所述页面元素跟随鼠标的滑动而滚动；

设置各个所述页面元素在被点击时进行声音提示。

优选地，

所述设计所述前端页面中各个页面元素的百分比，包括：

所述设计所述前端页面中各个页面元素的百分比，包括：

在所述前端页面代码头部，加入元标签，让前端页面宽度自动适应终端屏幕设备的宽度；其中，所述元标签中，包括屏幕设备的宽度，页面的初始缩放值，所述初始缩放值包括页面比例、最小缩放比例、最大播放比例和表征是否允许调整缩放比例的调整标识；在字体大小是页面默认大小的100％时，采用相对大小rem描述前端页面、各个所述页面元素和字号。

优选地，

所述通过层叠样式表CSS3将所述前端页面中的各个所述页面元素建立透视效果，包括：

在CSS3中，为所述前面页面的背景定义perspective属性，使各个所述页面元素获得透视效果；

优选地，

所述设置所述前端页面中的各个所述页面元素跟随鼠标的滑动而滚动，包括：

调用JavaScript，实时捕获鼠标的滚轮滑动事件；

当捕获到滚轮滑动事件时，确定滚轮的滑动角度和滑动方向；

根据所述滑动角度和滑动方向，通过CSS3的translate属性和rotate属性控制各个所述页面元素在所述前端页面中滚动。

优选地，

所述通过CSS3设置各个所述页面元素围绕所述前端界面形成3D圆弧，包括：

通过设置translate属性，移动各个所述页面元素使各个所述页面元素横向排列；

通过设置scale属性，设置各个所述页面元素的3D缩放值；

通过设置rotate属性，将各个页面元素以圆弧形进行环绕。

优选地，

所述设置各个所述页面元素在被点击时进行声音提示，包括：

预先在前端页面中设置至少一个音频元素；

通过JavaScript实时捕获针对各个所述页面元素的点击事件；

当捕获到所述点击事件时，触发所述至少一个音频元素中的目标音频元素，播放对应的音频以进行点击提示。

第二方面，本发明实施例提供了基于第一方面中任一所述的前端页面生成方法的前端页面生成装置，包括：

设计模块，用于设计所述前端页面中各个页面元素的百分比；

建立模块，用于通过层叠样式表CSS3将所述前端页面中的各个所述页面元素建立透视效果；

处理模块，用于通过CSS3设置各个所述页面元素围绕所述前端界面形成3D圆弧；设置所述前端页面中的各个所述页面元素跟随鼠标的滑动而滚动；设置各个所述页面元素在被点击时进行声音提示。

优选地，

所述设计模块，在执行所述设计所述前端页面中各个页面元素的百分比时，具体执行：

在所述前端页面代码头部，加入一行viewport元标签，让前端页面宽度自动适应终端屏幕设备的宽度；

所述设计所述前端页面中各个页面元素的百分比，包括：

在所述前端页面代码头部，加入元标签，让前端页面宽度自动适应终端屏幕设备的宽度；其中，所述元标签中，包括屏幕设备的宽度，页面的初始缩放值，所述初始缩放值包括页面比例、最小缩放比例、最大播放比例和表征是否允许调整缩放比例的调整标识；在字体大小是页面默认大小的100％时，采用相对大小rem描述前端页面、各个所述页面元素和字号。

第三方面，本发明实施例提供了前端页面生成装置，包括：至少一个存储器和至少一个处理器；

所述至少一个存储器，用于存储机器可读程序；

所述至少一个处理器，用于调用所述机器可读程序，执行上述第一方面中任一所述的方法。

第四方面，本发明实施例提供了计算机可读介质，所述计算机可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行上述第一方面中任一所述的方法。。

本发明实施例提供了前端页面生成方法、装置及计算机可读介质。为了页面能够更好的实现自适应，首先设置前端页面中各个页面元素的百分比，之后，通过层叠样式表CSS3将前端页面中的各个页面元素建立透视效果，并使各个页面原色围绕前端界面形成3D圆弧，带来更好的静态视觉效果。设置所述前端页面中的各个所述页面元素跟随鼠标的滑动而滚动并设置各个所述页面元素在被点击时进行声音提示，提高用户在交互时的互动感。本发明提供的方案实现了前端页面由2D单一交互到3D复杂页面和交互的提升，增强了静态视觉效果的同事添加了3D旋转和点击声音提示，有效提高了前端页面的交互体验。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一实施例提供的一种前端页面生成方法的流程图；

图2是本发明一实施例提供的一种前端页面生成装置的示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

如前所述，前端页面是用户与系统直接直接交互的渠道，前端页面直接影响着用户的使用体验，如今良好的用户体验的地位越来越重要，因此对前端界面的交互体验提出了很高要求。

目前，前端界面的展示通常都是2D平面的单一交互，随着浏览器的不断进步和更新，这样的前端界面由于视觉效果不佳且交互方式单一，已经无法为用户提供良好的交互体验。

下面结合附图对本发明各个实施例提供的前端页面生成方法、装置及计算机可读介质作详细说明。

如图1所示，本发明一实施例提供了前端页面生成方法，该方法包括如下步骤：

步骤101：设计所述前端页面中各个页面元素的百分比；

步骤102：通过层叠样式表CSS3将所述前端页面中的各个所述页面元素建立透视效果；

步骤103：通过CSS3设置各个所述页面元素围绕所述前端界面形成3D圆弧；

步骤104：设置所述前端页面中的各个所述页面元素跟随鼠标的滑动而滚动；

步骤105：设置各个所述页面元素在被点击时进行声音提示。

为了页面能够更好的实现自适应，首先设置前端页面中各个页面元素的百分比，之后，通过层叠样式表CSS3将前端页面中的各个页面元素建立透视效果，并使各个页面原色围绕前端界面形成3D圆弧，带来更好的静态视觉效果。设置所述前端页面中的各个所述页面元素跟随鼠标的滑动而滚动并设置各个所述页面元素在被点击时进行声音提示，提高用户在交互时的互动感。本发明提供的方案实现了前端页面由2D单一交互到3D复杂页面和交互的提升，增强了静态视觉效果的同事添加了3D旋转和点击声音提示，有效提高了前端页面的交互体验。

在本发明一实施例中，所述设计所述前端页面中各个页面元素的百分比，包括：

在所述前端页面代码头部，加入一行viewport元标签，让前端页面宽度自动适应终端屏幕设备的宽度；

所述viewport元标签为：

maximum-scale＝1.0,minimum-scale＝1.0,user-scalable＝no">；

其中，“width＝device-width”中，“width”为设置layout viewport的宽度，为一正整数，“width-device”表示宽度为屏幕设备的宽度，“initial-scale＝1.0”中，initial-scale为设置页面的初始缩放值，为一个带小数的数字，1.0表示页面的100％，“minimum-scale＝1.0”表示最小的缩放比例，“maximum-scale＝1.0”表示最大的缩放比例，“user-scalable＝no”表示用户是否可以调整缩放比例，值为“no”或“yes”；

在字体大小是页面默认大小的100％时，采用相对大小rem描述前端页面、各个所述页面元素和字号。

具体地，为了使用页面能更好自适应，采用rem布局方式。设计页面元素的百分比时，基于屏幕的分辨率，采用定位前端页面代码、自适应屏幕宽度，并采用相对大小rem描述前端页面、页面元素和字号。

此外，还可以使用流动布局技术，实现页面元素位置的自动调整。使用流动布局技术时，页面各区块中元素的位置都是浮动的，这就使得在屏幕设备宽度太小放不下两个元素时，后一个元素会自动滚动到前一个元素的下方，不会在屏幕设备的水平方向溢出。基于CSS3媒体查询方法，不同屏幕设备的特征，让不同特征下的CSS代码生效。需要预先设计屏幕设备的尺寸和比例页面，并将预先设计的内容统一放置在一套CSS代码中。屏幕设备的特征包括：浏览器宽/高Width/height、标识小于最大宽度时生效Max-width、标识大于最大宽度时生效Min-width、屏幕设备分辨率宽高Device-width/device-height、屏幕设备分辨率Resolution、纵向-高度大于等于宽度时Orientation:portrait、横向-高度小于宽度时Orientation:landscape。

在本发明一实施例中，所述通过层叠样式表CSS3将所述前端页面中的各个所述页面元素建立透视效果，包括：

在CSS3中，通过如下代码，为所述前面页面的背景定义perspective属性，使各个所述页面元素获得透视效果：

为了能够看出页面元素位移的效果，需要在背景上添加perspective属性。当背景定义为perspective属性时，作为子元素的各个页面元素会获得透视效果，而并非是背景获得透视效果。实现方法如下：

在本发明一实施例中，所述设置所述前端页面中的各个所述页面元素跟随鼠标的滑动而滚动，包括：

调用JavaScript，实时捕获鼠标的滚轮滑动事件；

当捕获到滚轮滑动事件时，确定滚轮的滑动角度和滑动方向；

根据所述滑动角度和滑动方向，通过CSS3的translate属性和rotate属性控制各个所述页面元素在所述前端页面中滚动。

所述通过CSS3设置各个所述页面元素围绕所述前端界面形成3D圆弧，包括：

通过设置translate属性，移动各个所述页面元素使各个所述页面元素横向排列；

通过设置scale属性，设置各个所述页面元素的3D缩放值；

通过设置rotate属性，将各个页面元素以圆弧形进行环绕。

具体地，CSS3中的旋转通过rotate属性实现，rotateX()、rotateY()、rotateZ()分别代表绕X、Y、Z轴旋转。translate用于实现位移，translateX(x)定义3D转化，仅使用用于X轴的值；translateY(y)定义3D转化，仅使用用于Y轴的值；translateZ(z)定义3D转化，仅使用用于Z轴的值；以上分别代表相对X，Y，Z轴的位移。sacle用于实现3D缩放，scaleX(x)给定一个X轴的3D缩放转换值；scaleY(x)给定一个Y轴的3D缩放转换值；scaleZ(x)给定一个Z轴的3D缩放转换值。落实到具体应用时，为了增强页面的动态视觉效果，将各页面元素围绕屏幕中旋转成一个3D圆弧，并且在鼠标滚轮滑动的时候页面元素跟随移动。由于3D圆弧中要产生通过视觉落差来实现，在通过移动将页面元素排列之后，需要根据不同的位置来调整个页面元素的3D缩放。在圆弧靠中间位置页面元素的3D缩放值和在圆弧靠近屏幕边缘位置的页面元素的3D缩放值不同，从而产生视觉落差，给观看者一种靠近屏幕中间的页面元素离屏幕较远，而靠近屏幕侧边框的页面元素距离屏幕较近的感觉。为了提高用户的交互体验，通过JavaScript捕获鼠标滚轮滑动事件，并根据滑动角度滑动方向使页面元素在前端页面中滚动，比如鼠标滚轮向上滑动30度，页面元素跟随向上滚动，使得用户能够直观的感受到自己进行了鼠标滚轮的滑动操作，从而提高了交互体验。

在本发明一实施例中，所述设置各个所述页面元素在被点击时进行声音提示，包括：

预先在前端页面中设置至少一个音频元素；

通过JavaScript实时捕获针对各个所述页面元素的点击事件；

当捕获到所述点击事件时，触发所述至少一个音频元素中的目标音频元素，播放对应的音频以进行点击提示。

具体地，为了进一步提高交互体验感，通过在前端页面中设置至少一个音频元素，并在JavaScript捕获到点击事件时播放音频，提示用户点击了按键，可以针对不同的按键设置不同的音频，在用户进行点击的时候播放对应干的音频，能够清楚的告知用户当前点击的是哪个按键。此外，除了点击时播放音频外，还可以对应设置视频动态效果，当用户进行点击的时候播放动画效果，使得界面更加美观，用户的操作感更强。

如图2所示，本发明实施例提供了图1中任一提供的前端页面生成方法的前端页面生成装置，包括：

设计模块201，用于设计所述前端页面中各个页面元素的百分比；

建立模块202，用于通过层叠样式表CSS3将所述前端页面中的各个所述页面元素建立透视效果；

处理模块203，用于通过CSS3设置各个所述页面元素围绕所述前端界面形成3D圆弧；设置所述前端页面中的各个所述页面元素跟随鼠标的滑动而滚动；设置各个所述页面元素在被点击时进行声音提示。

在本发明实施例中，所述设计模块201，在执行所述设计所述前端页面中各个页面元素的百分比时，具体执行：

在所述前端页面代码头部，加入一行viewport元标签，让前端页面宽度自动适应终端屏幕设备的宽度；

所述viewport元标签为：

；

其中，“width＝device-width”中，“width”为设置layout viewport的宽度，为一正整数，“width-device”表示宽度为屏幕设备的宽度，“initial-scale＝1.0”中，initial-scale为设置页面的初始缩放值，为一个带小数的数字，1.0表示页面的100％，“minimum-scale＝1.0”表示最小的缩放比例，“maximum-scale＝1.0”表示最大的缩放比例，“user-scalable＝no”表示用户是否可以调整缩放比例，值为“no”或“yes”；

在字体大小是页面默认大小的100％时，采用相对大小rem描述前端页面、各个所述页面元素和字号。

可以理解的是，本发明实施例示意的结构并不构成对前端页面生成装置的具体限定。在本发明的另一些实施例中，前端页面生成装置可以包括比图示更多或者更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件、软件或者软件和硬件的组合来实现。

上述前端页面生成装置内的各单元之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，具体内容可参见本发明方法实施例中的叙述，此处不再赘述。

本发明还提供了一种计算机可读介质，存储用于使一计算机执行如本文所述的前端页面生成方法的指令。具体地，可以提供配有存储介质的系统或者装置，在该存储介质上存储着实现上述实施例中任一实施例的功能的软件程序代码，且使该系统或者装置的计算机(或CPU或MPU)读出并执行存储在存储介质中的程序代码。

在这种情况下，从存储介质读取的程序代码本身可实现上述实施例中任何一项实施例的功能，因此程序代码和存储程序代码的存储介质构成了本发明的一部分。

用于提供程序代码的存储介质实施例包括软盘、硬盘、磁光盘、光盘(如CD-ROM、CD-R、CD-RW、DVD-ROM、DVD-RAM、DVD-RW、DVD+RW)、磁带、非易失性存储卡和ROM。可选择地，可以由通信网络从服务器计算机上下载程序代码。

此外，应该清楚的是，不仅可以通过执行计算机所读出的程序代码，而且可以通过基于程序代码的指令使计算机上操作的操作系统等来完成部分或者全部的实际操作，从而实现上述实施例中任意一项实施例的功能。

此外，可以理解的是，将由存储介质读出的程序代码写到插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器中，随后基于程序代码的指令使安装在扩展板或者扩展单元上的CPU等来执行部分和全部实际操作，从而实现上述实施例中任一实施例的功能。

需要说明的是，上述各流程和各系统结构图中不是所有的步骤和模块都是必须的，可以根据实际的需要忽略某些步骤或模块。各步骤的执行顺序不是固定的，可以根据需要进行调整。上述各实施例中描述的系统结构可以是物理结构，也可以是逻辑结构，即，有些模块可能由同一物理实体实现，或者，有些模块可能分由多个物理实体实现，或者，可以由多个独立设备中的某些部件共同实现。

以上各实施例中，硬件单元可以通过机械方式或电气方式实现。例如，一个硬件单元可以包括永久性专用的电路或逻辑(如专门的处理器，FPGA或ASIC)来完成相应操作。硬件单元还可以包括可编程逻辑或电路(如通用处理器或其它可编程处理器)，可以由软件进行临时的设置以完成相应操作。具体的实现方式(机械方式、或专用的永久性电路、或者临时设置的电路)可以基于成本和时间上的考虑来确定。

上文通过附图和优选实施例对本发明进行了详细展示和说明，然而本发明不限于这些已揭示的实施例，基于上述多个实施例本领域技术人员可以知晓，可以组合上述不同实施例中的代码审核手段得到本发明更多的实施例，这些实施例也在本发明的保护范围之内。