浮层的展开方法和装置与流程

本申请涉及页面设计领域，尤其涉及浮层的展开方法和装置。

背景技术：

当前，在页面设计中经常采用鼠标悬停(Hover)展开浮层的方式作为页面与用户进行交互的一种方式，当页面中采用了该方式时，由用户通过鼠标控制显示在页面中的光标的移动，当光标悬停在目标对象上时，展开一个临时浮层窗口，该临时浮层窗口简称为浮层。

由于浮层会遮挡掉页面上部分区域的内容信息，若浮层将用户即将要浏览的内容遮挡了，此时需要移动鼠标，直到该浮层消失，用户才能浏览到被遮挡区域的内容。

技术实现要素：

本申请实施例提供了浮层的展开方法和装置，能够避免浮层遮挡用户即将要浏览的内容。

一方面，提供了一种浮层的展开方法，所述方法包括：

记录页面中显示的光标的坐标值，所述光标在所述页面中的移动由鼠标控制；或者，记录触头在触摸屏上的触点的坐标值；

当所述光标移动到目标对象的边界区域时，根据所述光标的坐标值的变化，确定所述光标移动的路径方向；或者，当所述触点移动到目标对象的边界区域时，根据所述触点的坐标值的变化，确定所述触点移动的路径方向；

根据所述光标移动的路径方向，或者，根据所述触点移动的路径方向，确 定浮层的展开方向；

当所述光标悬停在所述目标对象上时，或者，当所述触点停留在所述目标对象上时，以所述展开方向将所述浮层展开。

可选地，所述记录页面中显示的光标的坐标值，包括：

对页面中的光标移动事件进行监听，当监听到所述光标移动事件时，记录所述页面中显示的光标的坐标值；或者，

定时记录页面中显示的光标的坐标值。

可选地，所述根据所述光标移动的路径方向，或者，根据所述触点移动的路径方向，确定浮层的展开方向，包括：

根据所述光标移动的路径方向，或者，根据所述触点移动的路径方向，将与所述路径方向相反的方向确定为浮层的展开方向。

可选地，所述根据所述光标移动的路径方向，或者，根据所述触点移动的路径方向，确定浮层的展开方向，包括：

当所述光标移动的路径方向或者所述触点移动的路径方向为从上往下时，确定浮层的展开方向为从下往上。

可选地，所述根据所述光标移动的路径方向，或者，根据所述触点移动的路径方向，确定浮层的展开方向，包括：

当所述光标移动的路径方向或者所述触点移动的路径方向为从右往左时，确定浮层的展开方向为从左往右。

可选地，所述根据所述光标移动的路径方向，或者，根据所述触点移动的路径方向，确定浮层的展开方向，包括：

当所述光标移动的路径方向或者所述触点移动的路径方向为从下往上时，确定浮层的展开方向为从上往下。

可选地，所述根据所述光标移动的路径方向，或者，根据所述触点移动的路径方向，确定浮层的展开方向，包括：

当所述光标移动的路径方向或者所述触点移动的路径方向为从左往右时， 确定浮层的展开方向为从右往左。

另一方面，提供了一种浮层的展开装置，所述装置包括：

记录单元，用于记录页面中显示的光标的坐标值，所述光标在所述页面中的移动由鼠标控制；或者，记录触头在触摸屏上的触点的坐标值；

确定单元，用于当所述光标移动到目标对象的边界区域时，根据所述记录单元记录的所述光标的坐标值的变化，确定所述光标移动的路径方向；或者，当所述触点移动到目标对象的边界区域时，根据所述记录单元记录的所述触点的坐标值的变化，确定所述触点移动的路径方向；

所述确定单元，还用于根据所述光标移动的路径方向，或者，根据所述触点移动的路径方向，确定浮层的展开方向；

展开单元，用于当所述光标悬停在所述目标对象上时，或者，当所述触点停留在所述目标对象上时，以所述确定单元确定的展开方向将所述浮层展开。

可选地，所述记录单元，具体用于对页面中的光标移动事件进行监听，当监听到所述光标移动事件时，记录所述页面中显示的光标的坐标值；或者，定时记录页面中显示的光标的坐标值。

可选地，所述确定单元，具体用于根据所述光标移动的路径方向，或者，根据所述触点移动的路径方向，将与所述路径方向相反的方向确定为浮层的展开方向。

可选地，所述确定单元，具体用于当所述光标移动的路径方向或者所述触点移动的路径方向为从上往下时，确定浮层的展开方向为从下往上。

可选地，所述确定单元，具体用于当所述光标移动的路径方向或者所述触点移动的路径方向为从右往左时，确定浮层的展开方向为从左往右。

可选地，所述确定单元，具体用于当所述光标移动的路径方向或者所述触点移动的路径方向为从下往上时，确定浮层的展开方向为从上往下。

可选地，所述确定单元，具体用于当所述光标移动的路径方向或者所述触点移动的路径方向为从左往右时，确定浮层的展开方向为从右往左。

本申请提供了一种浮层的展开方法，通过记录光标的坐标值，确定光标移动的路径方向，或者，通过记录触头在触摸屏上的触点的坐标值，确定触点移动的路径方向；依据光标移动的路径方向或者触点移动的路径方向，确定浮层的展开方向，由于光标在页面中的移动由用户通过鼠标控制，触点在页面中的移动由用户通过触头控制，因此光标移动的路径方向或者触点移动的路径方向能够反映出用户的浏览路径，从而根据光标移动的路径方向或者触点移动的路径方向确定出的展开方向将该浮层展开，能够避免浮层遮挡用户即将要浏览的内容。

附图说明

图1为本申请实施例提供的浮层的展开方法流程图；

图2为某网站一个含二级类目的地区选择面板网页示意图；

图3为本申请实施例中光标移动的路径方向与浮层的展开方向的对应关系示意图；

图4为本申请实施例中光标移动的路径方向与浮层的展开方向的另一对应关系示意图；

图5为本申请实施例提供的浮层的展开装置结构图。

具体实施方式

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

为便于对本申请实施例的理解，下面将结合附图以具体实施例做进一步的解释说明，实施例并不构成对本申请实施例的限定。

图1为本申请实施例提供的浮层的展开方法流程图，该方法的执行主体可以为计算机等用户设备，如图1所示，该方法具体包括：

步骤101，记录页面中显示的光标的坐标值，光标在页面中的移动由鼠标控制；或者，记录触头在触摸屏上的触点的坐标值。

其中，上述页面具体可以为网站页面，简称网页，当显示屏为传统液晶屏时，记录页面中显示的光标的坐标值，所述光标在所述页面中的移动由鼠标控制；当显示屏为触摸屏时，记录触头在触摸屏上的触点的坐标值，上述触头具体可以为用户的手指。

本申请实施例中，可以但不限于采用下述两种方式中的任意一种方式来记录页面中显示的光标的坐标值：第一种方式，对页面中的光标移动事件进行监听，当监听到所述光标移动事件时，记录所述页面中显示的光标的坐标值；第二种方式，定时记录页面中显示的光标的坐标值。

对于记录触头在触摸屏上的触点的坐标值的具体方式，本申请实施例不做具体限定。

具体地，本申请可以运用机器语言javascript进行开发设计，通过javascript在网页的body节点上监听onmousemove事件，并在监听到onmousemove事件时，记录该网页中显示的光标的坐标值；或者，通过javascript中的setTimeout计时器或setInterval计时器进行计时，定时记录网页中显示的光标的坐标值。

步骤102，当光标移动到目标对象的边界区域时，根据坐标值的变化，确定光标移动的路径方向；或者，当触点移动到目标对象的边界区域时，根据触点的坐标值的变化，确定触点移动的路径方向。

该目标对象的边界区域可以设定为一个较大的范围，例如整个网页，也可以设定为一个较小的范围，例如该目标对象附近1平方厘米的区域。

本申请实施例中，根据记录的光标的坐标值的变化趋势，确定光标移动的路径方向，光标移动的路径方向可以但不限于包括下述四种：从上往下、 从下往上、从左往右和从右往左。或者，根据记录的触点的坐标值的变化趋势，确定触点移动的路径方向，触点移动的路径方向可以但不限于包括下述四种：从上往下、从下往上、从左往右和从右往左。

步骤103，根据光标移动的路径方向，或者，根据触点移动的路径方向，确定浮层的展开方向。

目前常见的鼠标悬停展开浮层的方式中，浮层的展开方向大多是预先设定的固定方向，例如，基于目标对象在网页中的位置来设定浮层的展开方向，当目标对象在网页中的位置偏左侧时，设定浮层的展开方向为向右；当目标对象在网页中的位置偏右侧时，设定浮层的展开方向为向左。固定的展开方向有很大的机率使浮层将用户即将要浏览的内容遮挡了，此时需要移动鼠标，直到该浮层消失，用户才能浏览到被该浮层遮挡的区域，用户体验不佳。

参见图2所示的某网站一个含二级类目的地区选择面板网页示意图，该网页中包含了多个省份名称，当目标对象为其中一个省份名称，且光标悬停在该目标对象上时，会沿该目标对象边沿展开一个浮层，该浮层中展示了上述一个省份名称下辖的城市名称，无论该浮层以哪个方向展开，都会遮挡住网页中的部分区域，妨碍用户对该区域内容的浏览，也影响了用户对该区域中的目标对象的鼠标悬停操作。

本申请实施例中，为了避免浮层将用户即将要浏览的内容遮挡了，可以根据所述光标移动的路径方向，将与所述路径方向相反的方向确定为浮层的展开方向；或者，根据所述触点移动的路径方向，将与所述路径方向相反的方向确定为浮层的展开方向。相对于固定的展开方向，根据光标移动的路径方向或者触点移动的路径方向，确定浮层的展开方向有多种可能性。

具体地，参照图3所示的本申请实施例中光标移动的路径方向与浮层的展开方向的对应关系示意图，当所述光标移动的路径方向为从上往下时，有较大几率确定用户已经浏览过目标对象上方区域的内容，从而确定浮层的展开方向为从下往上。类似地，当所述触点移动的路径方向为从上往下时，有 较大几率确定用户已经浏览过目标对象上方区域的内容，从而确定浮层的展开方向为从下往上。

参照图4所示的本申请实施例中光标移动的路径方向与浮层的展开方向的另一对应关系示意图，当所述光标移动的路径方向为从右往左时，有较大几率确定用户已经浏览过目标对象右侧区域的内容，从而确定浮层的展开方向为从左往右。类似地，当所述触点移动的路径方向为从右往左时，有较大几率确定用户已经浏览过目标对象右侧区域的内容，从而确定浮层的展开方向为从左往右。

当所述光标移动的路径方向为从下往上时，有较大几率确定用户已经浏览过目标对象下方区域的内容，从而确定浮层的展开方向为从上往下。类似地，当所述触点移动的路径方向为从下往上时，有较大几率确定用户已经浏览过目标对象下方区域的内容，从而确定浮层的展开方向为从上往下。

当所述光标移动的路径方向为从左往右时，有较大几率确定用户已经浏览过目标对象左侧区域的内容，从而确定浮层的展开方向为从右往左。类似地，当所述触点移动的路径方向为从左往右时，有较大几率确定用户已经浏览过目标对象左侧区域的内容，从而确定浮层的展开方向为从右往左。

总之，光标或触点移动的路径方向从哪个方向过来，浮层就选择向哪个方向展开，尽可能不遮挡用户即将要浏览的内容。

步骤104，当光标悬停在目标对象上时，或者，当触点停留在目标对象上时，以展开方向将浮层展开。

本申请实施例中，所述光标悬停在所述目标对象上，可以但不限于包括下面三种情况：用户移动鼠标使所述光标悬停在所述目标对象上；或者，用户移动鼠标使所述光标悬停在所述目标对象上，并点击鼠标左键；或者，用户移动鼠标使所述光标悬停在所述目标对象上，并点击鼠标右键。

所述触点停留在所述目标对象上，可以但不限于包括下面两种情况：用户移动触头使所述触点停留在所述目标对象上；或者，用户移动触头使所述触 点停留在所述目标对象上，并通过触头按压触摸屏。

通常地，目标对象在网页中的位置固定，本申请实施例中，可以预先确定目标对象的坐标范围，当光标的坐标值落入上述坐标范围并持续时间达到预设时间时，确认此时光标悬停在目标对象上，或者，当触点的坐标值落入上述坐标范围并持续时间达到预设时间时，确认此时触点停留在目标对象上。

当所述光标悬停在所述目标对象上时，或者，当所述触点停留在所述目标对象上时，可以沿着目标对象的边沿以所述展开方向将所述浮层展开，或者，沿着目标对象的中心线以所述展开方向将所述浮层展开。

可选地，当步骤103中确定出的浮层的展开方向为从下往上时，当光标悬停在目标对象上时，或者，当触点停留在目标对象上时，沿着目标对象的上边沿从下往上将该浮层展开。

当步骤103中确定出的浮层的展开方向为从左往右时，当光标悬停在目标对象上时，或者，当触点停留在目标对象上时，沿着目标对象的右边沿从左往右将该浮层展开。

当步骤103中确定出的浮层的展开方向为从上往下时，当光标悬停在目标对象上时，或者，当触点停留在目标对象上时，沿着目标对象的下边沿从上往下将该浮层展开。

当步骤103中确定出的浮层的展开方向为从右往左时，当光标悬停在目标对象上时，或者，当触点停留在目标对象上时，沿着目标对象的左边沿从右往左将该浮层展开。

本申请提供了一种浮层的展开方法，通过记录光标的坐标值，确定光标移动的路径方向，或者，通过记录触头在触摸屏上的触点的坐标值，确定触点移动的路径方向；依据光标移动的路径方向或者触点移动的路径方向，确定浮层的展开方向，由于光标在页面中的移动由用户通过鼠标控制，触点在页面中的移动由用户通过触头控制，因此光标移动的路径方向或者触点移动的路径方向能够反映出用户的浏览路径，从而根据光标移动的路径方向或者触 点移动的路径方向确定出的展开方向将该浮层展开，能够避免浮层遮挡用户即将要浏览的内容。

图5为本申请实施例提供的浮层的展开装置结构图，该装置用于执行本申请实施例提供的浮层的展开方法，并具体设置于计算机等用户设备中，如图5所示，该装置具体包括：

记录单元501，用于记录记录页面中显示的光标的坐标值，所述光标在所述页面中的移动由鼠标控制；或者，记录触头在触摸屏上的触点的坐标值；

确定单元502，用于当所述光标移动到目标对象的边界区域时，根据所述记录单元501记录的所述光标的坐标值的变化，确定所述光标移动的路径方向；或者，当所述触点移动到目标对象的边界区域时，根据所述记录单元501记录的所述触点的坐标值的变化，确定所述触点移动的路径方向；

所述确定单元502，还用于根据所述光标移动的路径方向，或者，根据所述触点移动的路径方向，确定浮层的展开方向；

展开单元503，用于当所述光标悬停在所述目标对象上时，或者，当所述触点停留在所述目标对象上时，以所述确定单元502确定的展开方向将所述浮层展开。

可选地，所述记录单元501，具体用于对页面中的光标移动事件进行监听，当监听到所述光标移动事件时，记录所述页面中显示的光标的坐标值；或者，定时记录页面中显示的光标的坐标值。

可选地，所述确定单元502，具体用于根据所述光标移动的路径方向，或者，根据所述触点移动的路径方向，将与所述路径方向相反的方向确定为浮层的展开方向。

可选地，所述确定单元502，具体用于当所述光标移动的路径方向或者所述触点移动的路径方向为从上往下时，确定浮层的展开方向为从下往上。

可选地，所述确定单元502，具体用于当所述光标移动的路径方向或者所述触点移动的路径方向为从右往左时，确定浮层的展开方向为从左往右。

可选地，所述确定单元502，具体用于当所述光标移动的路径方向或者所述触点移动的路径方向为从下往上时，确定浮层的展开方向为从上往下。

可选地，所述确定单元502，具体用于当所述光标移动的路径方向或者所述触点移动的路径方向为从左往右时，确定浮层的展开方向为从右往左。

专业人员应该还可以进一步意识到，结合本文中所公开的实施例描述的各示例的对象及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上所述的具体实施方式，对本申请的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本申请的具体实施方式而已，并不用于限定本申请的保护范围，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。