CN111309202B - 一种基于网页的动态显示方法、终端及存储介质 - Google Patents

Abstract

本发明公开了一种基于网页的动态显示方法、终端及存储介质，所述基于网页的动态显示方法包括：当进入网页的主页面时，分别显示所述主页面中的瀑布流界面和可交互动态版图；获取用户在所述主页面中输入的鼠标位置；根据所述鼠标位置加载所述瀑布流界面内对应的主版块，或根据所述鼠标位置移动所述可交互动态版图内的线条。本发明通过采用瀑布流式的页面布局，以及采用可交互的动态版图，加强了用户与网页之间的互动性，增强了用户对于网页内容的认知。

Description

一种基于网页的动态显示方法、终端及存储介质

技术领域

本发明涉及终端应用领域，尤其涉及的是一种基于网页的动态显示方法、终端及存储介质。

背景技术

在网页设计当中，由模块化趋向扁平化，由单向传播趋向双向互动，这是网站设计的大势所趋；现在的官方网站，作为向公众开放的平台，也愈发意识到利用页面与客户形成互动的重要性。

但在目前的网站设计中，大多采用传统的模块化设置，也就是说，模块化的设置方式采用的是静止的网页设计，对于用户而言，只能通过颜色、字体这些微小区别去吸引用户浏览重点页面；这就导致，网页设计方案不能很好地引导用户浏览网站，也不能很好地增加客户对于网页内容的感知；在网页缺乏动态效果的情况下，不能以潜移默化的方式与用户形成互动。

因此，现有技术还有待于改进和发展。

发明内容

本发明要解决的技术问题在于，针对现有技术缺陷，本发明提供一种基于网页的动态显示方法、终端及存储介质，通过采用瀑布流式的页面布局，以及采用可交互的动态版图，加强了用户与网页之间的互动性，增强了用户对于网页内容的认知。

本发明解决技术问题所采用的技术方案如下：

第一方面，本发明提供一种基于网页的动态显示方法，其中，所述基于网页的动态显示方法包括以下步骤：

当进入网页的主页面时，分别显示所述主页面中的瀑布流界面和可交互动态版图；

获取用户在所述主页面中输入的鼠标位置；

根据所述鼠标位置加载所述瀑布流界面内对应的主版块，或根据所述鼠标位置移动所述可交互动态版图内的线条。

进一步地，所述当进入网页的主页面时，显示所述主页面中的瀑布流界面和可交互动态版图，之前还包括：

预先设置用于显示在所述主页面中的所述瀑布流界面和所述可交互动态版图；

其中，在所述瀑布流界面中设置有隐藏式的子版块。

进一步地，所述当进入网页的主页面时，显示所述主页面中的瀑布流界面和可交互动态版图，具体包括以下步骤：

当进入所述网页的主页面时，加载所述瀑布流界面，并在所述主页面的当前显示区域显示所述瀑布流界面；

获取所述可交互动态版图，并在所述瀑布流界面的下方显示所述可交互动态版图。

进一步地，所述获取用户在所述主页面中输入的鼠标位置，具体包括以下步骤：

获取所述用户在所述主页面中输入的所述鼠标位置；

判断所述鼠标位置是否处于所述瀑布流界面内；

当所述鼠标位置未处于所述瀑布流界面内时，判断所述鼠标位置是否处于所述可交互动态版图内。

进一步地，所述根据所述鼠标位置加载所述瀑布流界面内对应的主版块，具体包括以下步骤：

当所述鼠标位置处于所述瀑布流界面内时，加载所述瀑布流界面内主版块的下拉界面；

获取所述用户在所述下拉界面中输入的鼠标移动轨迹；

根据所述鼠标移动轨迹经过的坐标点，在所述下拉界面中显示与所述坐标点对应的子版块。

进一步地，所述根据所述鼠标移动轨迹经过的坐标点，在所述下拉界面中显示与所述坐标点对应的子版块，之后还包括：

当所述用户在所述下拉界面中点击子版块时，进入与所述子版块对应的子页面，并显示所述子页面的内容。

进一步地，所述根据所述鼠标位置移动所述可交互动态版图内的线条，具体包括以下步骤：

当所述鼠标位置处于所述可交互动态版图内时，获取所述用户在所述下拉界面中输入的鼠标移动轨迹；

根据所述鼠标移动轨迹经过的坐标点，移动所述可交互动态版图中的与所述坐标点周围的线条，以在所述可交互动态版图中显示所述鼠标移动轨迹。

进一步地，所述基于网页的动态显示方法还包括：

当所述用户点击所述主页面时，根据所述鼠标所在的坐标点进行定位显示；

当所述用户输入滚动操作时，根据所述滚动操作在所述主页面的顶部显示所述阅读进度。

第二方面，本发明提供一种终端，其中，包括：处理器以及与所述处理器连接的存储器；

所述存储器存储有基于网页的动态显示程序，所述基于网页的动态显示程序被所述处理器执行时用于实现如第一方面所述的基于网页的动态显示方法。

第三方面，本发明提供一种存储介质，其中，所述存储介质存储有基于网页的动态显示程序，所述基于网页的动态显示程序被处理器执行时用于实现如第一方面所述的基于网页的动态显示方法。

本发明采用上述技术方案具有以下效果：

本发明通过采用瀑布流式的页面布局，以及采用可交互的动态板块，可根据用户输入的鼠标移动轨迹动态加载主版块中的子版块，或根据用户输入的鼠标移动轨迹动态在可交互动态版图中显示鼠标移动轨迹；本发明通过设置瀑布流式的页面布局，以及采用可交互的动态板块，加强了用户与网页之间的互动性，增强了用户对于网页内容的认知。

附图说明

图1是本发明较佳实施例中基于网页的动态显示方法的流程图。

图2是本发明较佳实施例中终端的功能原理图。

具体实施方式

为使本发明的目的、技术方案及优点更加清楚、明确，以下参照附图并举实施例对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

实施例一

如图1所示，本实施例提供一种基于网页的动态显示方法，所述基于网页的动态显示方法包括以下步骤：

步骤S100，当进入网页的主页面时，分别显示所述主页面中的瀑布流界面和可交互动态版图。

在本实施例中，所述基于网页的动态显示方法应用于终端中，所述终端包括移动终端以及计算机等设备。

在设计所述网页的主页面时，需要在所述主页面中布局所述瀑布流界面和所述可交互动态版图；其中，所述瀑布流界面设置在所述主页面的显示区域，所述可交互动态版图则设置在所述瀑布流界面的下方；当用户在所述终端中登入所述网页的主页面时，即可在所述主页面中显示所述瀑布流界面和所述可交互动态版图。

顾名思义，所述瀑布流界面是指所述主页面中的一个显示界面，在所述显示界面中排列设置有多个主版块，且在每一个主版块中隐藏设置有多个子版块；当用户的鼠标位置停留在所述主版块时，在所述主版块的下方则会自动显示一个下拉界面，所述下拉界面类似于瀑布，并在所述下拉界面中显示之前隐藏的子版块。

而所述可交互动态版图是指显示在所述瀑布流界面的一个版图，所述可交互动态版图可实现用户与所述主页面之间的互动，当用户操作鼠标在所述可交互动态版图中移动时，所述可交互动态版图中的动态线条可随着鼠标的轨迹而向周围散开，从而在所述可交互动态版图中形成一条移动轨迹；当然，为了不影响所述可交互动态版图的内容，所述动态线条可设置为半透明的状态。

即在所述步骤100之前，还包括以下步骤：

步骤001，预先设置用于显示在所述主页面中的所述瀑布流界面和所述可交互动态版图；其中，在所述瀑布流界面中设置有隐藏式的子版块。

在本实施例中，当用户在所述终端中登入所述网页的主页面时，所述终端则会加载所述瀑布流界面，并在所述主页面的当前显示区域显示所述瀑布流界面；而与此同时，所述终端还获取所述可交互动态版图，并在所述瀑布流界面的下方显示所述可交互动态版图。

具体实施时，可在设计所述网页时，将预先设置的所述瀑布流界面和所述可交互动态版图存入网站服务器的数据库中；当用户在所述终端上登入所述主页面时，服务器从数据库中获取加载所述瀑布流界面需要的数据，以及从数据库中获取所述可交互动态版图；然后，通过网络将这些数据发送至所述终端；待所述终端接收到这些数据时，在所述主页面上加载所述瀑布流界面，并显示所述瀑布流界面中的内容；以及在所述瀑布流界面的下方显示所述可交互动态版图；待所述主页面的内容加载完成时，用户即可在所述瀑布流界面以及所述可交互动态版图上实现互动。

即在所述步骤100之中，具体包括以下步骤：

步骤110，当进入所述网页的主页面时，加载所述瀑布流界面，并在所述主页面的当前显示区域显示所述瀑布流界面；

步骤120，获取所述可交互动态版图，并在所述瀑布流界面的下方显示所述可交互动态版图。

本实施例通过设置所述瀑布流界面以及所述可交互动态版图，使得用户在进入所述主页面后，在所述瀑布流界面以及所述可交互动态版图上实现互动，加强了用户与所述网页之间的互动性，从而更好地引导用户浏览相应的子版块。

如图1所示，所述基于网页的动态显示方法还包括以下步骤：

步骤S200，获取用户在所述主页面中输入的鼠标位置。

在本实施例中，在所述终端加载完所述瀑布流界面以及所述可交互动态版图之后，用户即可在所述瀑布流界面或所述可交互动态版图中进行互动。

具体地，在进行互动时，所述终端会获取所述用户在所述主页面中输入的所述鼠标位置，然后对所述鼠标位置进行判断；在判断时，需要判断所述鼠标位置是否处于所述瀑布流界面内，当所述鼠标位置处于所述瀑布流界面内时，可在所述瀑布流界面实现互动；而当所述鼠标位置未处于所述瀑布流界面内时，则需要进一步判断所述鼠标位置是否处于所述可交互动态版图内，然后根据判断结果决定是否需要在所述可交互动态版图中实现互动。

当然，在另外的实施例中，也可先判断所述鼠标位置是否处于所述可交互动态版图内，然后再判断所述鼠标位置是否处于所述瀑布流界面内。

即在所述步骤200之中，具体包括以下步骤：

步骤210，获取所述用户在所述主页面中输入的所述鼠标位置；

步骤220，判断所述鼠标位置是否处于所述瀑布流界面内；

步骤230，当所述鼠标位置未处于所述瀑布流界面内时，判断所述鼠标位置是否处于所述可交互动态版图内。

在本实施例中，通过获取用户输入的鼠标位置，以及对所述鼠标位置进行判断，使得所述终端可以根据用户输入的鼠标位置在所述瀑布流界面中或所述可交互动态版图中实现互动。

如图1所示，所述基于网页的动态显示方法还包括以下步骤：

步骤S300，根据所述鼠标位置加载所述瀑布流界面内对应的主版块，或根据所述鼠标位置移动所述可交互动态版图内的线条。

在本实施例中，在实现互动时，可分为两种情况，第一种是在所述瀑布流界面中实现互动，第二种则是在所述可交互动态版图中实现互动，以下分别对这两种互动方式进行说明：

在所述瀑布流界面中实现互动时，需要检测到用户输入的鼠标位置处于所述瀑布流界面内；具体地，当所述鼠标位置处于所述瀑布流界面内时，加载所述瀑布流界面内主版块的下拉界面；由于，在所述瀑布流界面内设置有多个主版块，因此，在所述瀑布流界面中可对多个主版块进行排列，从而使多个主版块按照一定的条理、秩序进行排列，形成一定的律动形式；例如，可根据各主版块中子版块的数量，以颜色渐变、长度渐变、明暗渐变、形状渐变以及高低渐变的形式对主版块的顺序进行排列。

在所述下拉界面中，用户可操作鼠标在所述下拉界面中进行滑动；当鼠标滑动到某个位置时，即可显示该位置对应的子版块；在实际实施时，所述终端获取所述用户在所述下拉界面中输入的鼠标移动轨迹，然后根据所述鼠标移动轨迹经过的坐标点，在所述下拉界面中显示与所述坐标点对应的子版块；当所述用户在所述下拉界面中点击子版块时，则进入与所述子版块对应的子页面，并显示所述子页面的内容，以便于用户查看子页面中的内容。

当然，为了便于用户查看其他子版块，可设置其他子版块为半透明的状态，即当用户操作的鼠标经过某个子版块时，某个子版块以非透明的状态进行显示；亦可以凸出的形式来显示鼠标经过某个子版块，即当用户操作的鼠标经过某个子版块时，某个子版块凸出来，从而实现3D视感。

即在所述步骤300之中，具体包括以下步骤：

步骤311，当所述鼠标位置处于所述瀑布流界面内时，加载所述瀑布流界面内主版块的下拉界面；

步骤312，获取所述用户在所述下拉界面中输入的鼠标移动轨迹；

步骤313，根据所述鼠标移动轨迹经过的坐标点，在所述下拉界面中显示与所述坐标点对应的子版块；

步骤314，当所述用户在所述下拉界面中点击子版块时，进入与所述子版块对应的子页面，并显示所述子页面的内容。

在所述可交互动态版图中实现互动时，需要检测到用户输入的鼠标位置处于所述可交互动态版图内；具体地，当所述鼠标位置处于所述可交互动态版图内时，所述终端会获取所述用户在所述下拉界面中输入的鼠标移动轨迹，然后根据所述鼠标移动轨迹经过的坐标点，移动所述可交互动态版图中的与所述坐标点周围的线条，以在所述可交互动态版图中显示所述鼠标移动轨迹。

例如，当用户操作的鼠标移动到某个位置时，该位置周围的动态线条可随着鼠标的轨迹而向周围散开，从而在所述可交互动态版图中形成一条移动轨迹；通过设置可交互的动态版图，能够更好地引导用户点击并进入到相应的子页面，从而增加用户的浏览兴趣。

当然，在本实施例中，在所述主页面中设置有多个可交互动态版图；在每个所述可交互动态版图中显示有不同的内容，以及在每个所述可交互动态版图中设置有不同的子版图；当用户点击所述可交互动态版图中的子版图时，可进入与所述子版图对应的子页面，从而方便用户浏览该子页面中的内容。

步骤321，当所述鼠标位置处于所述可交互动态版图内时，获取所述用户在所述下拉界面中输入的鼠标移动轨迹；

步骤322，根据所述鼠标移动轨迹经过的坐标点，移动所述可交互动态版图中的与所述坐标点周围的线条，以在所述可交互动态版图中显示所述鼠标移动轨迹。

在本实施例中，当用户未在所述瀑布流界面或所述可交互动态版图内操作鼠标时，表示用户正在浏览所述主页面中的其他内容，例如，浏览所述主页面中的普通图片；当所述用户点击所述主页面时，根据所述鼠标所在的坐标点进行定位显示；当所述用户输入滚动操作时，根据所述滚动操作在所述主页面的顶部持续显示所述阅读进度，从而方便浏览所述主页面的具体进度。

当然，当用户在浏览子页面时，也可根据所述滚动操作在所述子页面的顶部持续显示阅读进度，从而方便用户得知浏览所述子页面的具体进度。

即所述基于网页的动态显示方法还包括以下步骤：

步骤400，当所述用户点击所述主页面时，根据所述鼠标所在的坐标点进行定位显示；

步骤500，当所述用户输入滚动操作时，根据所述滚动操作在所述主页面的顶部显示所述阅读进度。

本实施例中，在所述主页面以及所述子页面中设置有特定的加载GIF(类似于Windows***的加载圈，当加载所述主页面或所述子页面的内容时，所述加载GIF以彩蛋的形式呈现所述主页面或所述子页面中的加载内容。

本实施例通过设置瀑布流式的页面布局，以及采用可交互的动态板块，加强了用户与网页之间的互动性，增强了用户对于网页内容的认知。

实施例二

如图2所示，本实施例提供一种终端，其中，包括：处理器10以及与所述处理器10连接的存储器20；

所述存储器20存储有基于网页的动态显示程序，所述基于网页的动态显示程序被所述处理器10执行时用于实现如实施例一所述的基于网页的动态显示方法；具体如上所述。

实施例三

本实施例提供一种存储介质，其中，所述存储介质存储有基于网页的动态显示程序，所述基于网页的动态显示程序被处理器执行时用于实现如实施例一所述的基于网页的动态显示方法；具体如上所述。

综上所述，本发明通过采用瀑布流式的页面布局，以及采用可交互的动态板块，可根据用户输入的鼠标移动轨迹动态加载主版块中的子版块，或根据用户输入的鼠标移动轨迹动态在可交互动态版图中显示鼠标移动轨迹；本发明通过设置瀑布流式的页面布局，以及采用可交互的动态板块，加强了用户与网页之间的互动性，增强了用户对于网页内容的认知。

当然，本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关硬件(如处理器，控制器等)来完成，所述的程序可存储于一计算机可读取的存储介质中，所述程序在执行时可包括如上述各方法实施例的流程。其中所述的存储介质可为存储器、磁碟、光盘等。

应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。

Claims (8)

1.一种基于网页的动态显示方法，其特征在于，所述基于网页的动态显示方法包括以下步骤：

当进入网页的主页面时，分别显示所述主页面中的瀑布流界面和可交互动态版图；

获取用户在所述主页面中输入的鼠标位置；

根据所述鼠标位置加载所述瀑布流界面内对应的主版块，或根据所述鼠标位置移动所述可交互动态版图内的线条；

所述获取用户在所述主页面中输入的鼠标位置，具体包括以下步骤：

获取所述用户在所述主页面中输入的所述鼠标位置；

判断所述鼠标位置是否处于所述瀑布流界面内；

当所述鼠标位置未处于所述瀑布流界面内时，判断所述鼠标位置是否处于所述可交互动态版图内；

所述根据所述鼠标位置移动所述可交互动态版图内的线条，具体包括以下步骤：

当所述鼠标位置处于所述可交互动态版图内时，获取所述用户在下拉界面中输入的鼠标移动轨迹；

根据所述鼠标移动轨迹经过的坐标点，移动所述可交互动态版图中的与所述坐标点周围的线条，以在所述可交互动态版图中显示所述鼠标移动轨迹；

当鼠标在所述可交互动态版图中移动时，所述可交互动态版图中的动态线条随着所述鼠标的轨迹而向周围散开，从而在所述可交互动态版图中形成一条移动轨迹。

2.根据权利要求1所述的基于网页的动态显示方法，其特征在于，所述当进入网页的主页面时，显示所述主页面中的瀑布流界面和可交互动态版图，之前还包括：

预先设置用于显示在所述主页面中的所述瀑布流界面和所述可交互动态版图；

其中，在所述瀑布流界面中设置有隐藏式的子版块。

3.根据权利要求1所述的基于网页的动态显示方法，其特征在于，所述当进入网页的主页面时，显示所述主页面中的瀑布流界面和可交互动态版图，具体包括以下步骤：

当进入所述网页的主页面时，加载所述瀑布流界面，并在所述主页面的当前显示区域显示所述瀑布流界面；

获取所述可交互动态版图，并在所述瀑布流界面的下方显示所述可交互动态版图。

4.根据权利要求1所述的基于网页的动态显示方法，其特征在于，所述根据所述鼠标位置加载所述瀑布流界面内对应的主版块，具体包括以下步骤：

当所述鼠标位置处于所述瀑布流界面内时，加载所述瀑布流界面内主版块的下拉界面；

获取所述用户在所述下拉界面中输入的鼠标移动轨迹；

根据所述鼠标移动轨迹经过的坐标点，在所述下拉界面中显示与所述坐标点对应的子版块。

5.根据权利要求4所述的基于网页的动态显示方法，其特征在于，所述根据所述鼠标移动轨迹经过的坐标点，在所述下拉界面中显示与所述坐标点对应的子版块，之后还包括：

当所述用户在所述下拉界面中点击子版块时，进入与所述子版块对应的子页面，并显示所述子页面的内容。

6.根据权利要求1所述的基于网页的动态显示方法，其特征在于，所述基于网页的动态显示方法还包括：

当所述用户点击所述主页面时，根据所述鼠标所在的坐标点进行定位显示；

当所述用户输入滚动操作时，根据所述滚动操作在所述主页面的顶部显示阅读进度。

7.一种终端，其特征在于，包括：处理器以及与所述处理器连接的存储器；

所述存储器存储有基于网页的动态显示程序，所述基于网页的动态显示程序被所述处理器执行时用于实现如权利要求1-6任一项所述的基于网页的动态显示方法。

8.一种存储介质，其特征在于，所述存储介质存储有基于网页的动态显示程序，所述基于网页的动态显示程序被处理器执行时用于实现如权利要求1-6任一项所述的基于网页的动态显示方法。

Images