页面显示的方法及设备技术

本发明专利技术公开了一种页面显示的方法及设备，其中页面包括第一图层和与第一图层相关联的第二图层，且第二图层隐藏显示，方法包括步骤：检测用户在页面上的操作位置，当操作位置从第一图层的范围之外进入第一图层的范围之内时，触发在第一图层之上叠加显示第二图层；逐步改变第二图层的位置，直到第二图层的位置达到第一图层范围内的第一预定位置为止；使第二图层停止移动达第一预定时间；以及将第二图层的位置从第一预定位置设置为第一图层之上的第二预定位置。降低第二图层在第一图层上的叠加显示过程的跳跃性，从而改善用户的视觉体验。

【技术实现步骤摘要】

本专利技术涉及计算机
，具体涉及一种页面显示的方法及设备。
技术介绍
图层提供了一种对页面对象进行有效控制的手段，图层可以包括文本、图片、表格、插件，也可以在图层里面嵌套其他图层。在HTML (HypertextMarkup Language,超文本标记语言)文档的正文部分可以放置的元素都可以放入图层内。由于图层可以放置在页面的任何位置，从而能有效控制页面中的对象。在现有技术中可通过控制图层的显示或隐藏，以实现页面交互技术，但由于在现有技术中图层从隐藏至完全显示的过程视觉跳跃性较强，影响用户体验。
技术实现思路
鉴于上述问题，提出了本专利技术以便提供一种克服上述问题或者至少部分地解决上述问题的页面显示的方法及设备。依据本专利技术的一个方面，提供了一种页面显示的方法，页面包括第一图层和与第一图层相关联的第二图层，且第二图层隐藏显示，方法包括以下步骤检测用户在页面上的操作位置，当操作位置从第一图层的范围之外进入第一图层的范围之内时，触发在第一图层之上叠加显示第二图层；逐步改变第二图层的位置，直到第二图层的位置达到第一图层范围内的第一预定位置为止；使第二图层停止移动达第一预定时间；以及将第二图层的位置从第一预定位置设置为第一图层之上的第二预定位置。可选地，第二图层处于位于第一图层的底部的不可见区域中来隐藏显示。可选地，用户在页面上的操作位置从第一图层的范围之外进入第一图层的范围之内通过将光标滑动到第一图层上和/或点击第一图层来实现。可选地，第一预定位置和第二预定位置分别位于第一图层上的两个不同的位置。可选地，在将第二图层从第一预定位置移动至第一图层之上的第二预定位置的步骤之后，方法还包括当用户在页面上的操作离开第一图层时，隐藏第二图层。根据本专利技术的另一个方面，提供了一种页面显示的设备，页面包括第一图层和与第一图层相关联的第二图层，而且第二图层隐藏显示，设备包括检测模块，用于检测用户在页面上的操作位置，当操作位置从第一图层的范围之外进入第一图层的范围之内时，发送触发在第一图层之上叠加显示第二图层的消息；以及第二图层呈现模块，在接收到检测模块发送的触发消息之后，适于逐步改变第二图层的位置，直到第二图层的位置达到第一图层范围内的第一预定位置为止，使第二图层停止移动达第一预定时间，以及将第二图层的位置从第一预定位置设置为第一图层之上的第二预定位置。根据本专利技术的页面显示的方法及设备，首先逐步改变第二图层的位置，然后当第二图层的位置达到第一图层范围内的第一预定位置时，使第二图层停止移动达第一预定时间，最后将第二图层的位置从第一预定位置设置为第一图层之上的第二预定位置，通过增加叠加显示中的中间过度过程，即当第二图层的位置达到第一图层范围内的第一预定位置时，使第二图层停止移动达第一预定时间，由此降低第二图层在第一图层上的叠加显示过程的跳跃性，从而改善用户的视觉体验。上述说明仅是本专利技术技术方案的概述，为了能够更清楚了解本专利技术的技术手段，而可依照说明书的内容予以实施，并且为了让本专利技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本专利技术的具体实施方式。附图说明通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本专利技术的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中图1示出了根据本专利技术一个实施例的页面显示的方法的流程图；以及图2示出了根据本专利技术一个实施例的页面显示的设备的框图。具体实施例方式下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。随着互联网应用的快速发展，一些页面交互的技术也在不断进步，越来越多的页面交互采用诸如CSS (Cascading Style Sheet,级联样式表)，Javascript代码等技术，以实现在网页上呈现具有吸引力的界面。在现有的利用图层进行页面交互的设计中，首先在页面的界面上显示第一图层，并且在第一图层中可显示某个产品的图片，当用户滑动鼠标到该第一图层中时，会在第一图层上叠加显示第二图层，并且在第二图层中显示对第一图层中的产品进一步描述的内容。然而，在上述图层叠加方式中，通常是在触发叠加事件后，马上在第一图层上叠加显示第二图层。由于在叠加显示第二图层的过程中缺乏中间过渡过程，导致叠加显示第二图层的视觉跳跃性较强，影响了用户体验。为此，本专利技术提出了一种页面显示的方法及设备。本专利技术提出的页面显示的方法主要是，在第一图层之上叠加显示第二图层时，首先逐步改变第二图层的位置，然后当第二图层的位置达到第一图层范围内的第一预定位置时，使第二图层停止移动达第一预定时间，最后再将第二图层的位置从第一预定位置设置为第一图层之上的第二预定位置，从而实现第二图层以平滑的方式叠加显示在第一图层上，由此减少第二图层在第一图层上叠加显示过程中的跳跃性，改善用户的视觉体验。下面结合图1具体说明根据本专利技术一个实施例的、适于解决上述问题的页面显示的方法100的流程图。如图1所示，本专利技术的实施例的页面显示的方法100始于步骤S 110，在步骤SllO中，设置第一图层以及与第一图层相关联的第二图层。可选地，在以HTML格式编写的页面上设置第一图层和与第一图层相关联的第二图层，第一图层和第二图层中可以包括文本、图片、表格、插件中的任意一个或多个。上述相关联可以是指第一图层中的文本、图片、表格或者插件与第二图层中的文本、图片、表格或插件相关联，例如第二图层中的图片所显示的内容是对第一图层中的图片所显示内容的进一步解释说明。根据本专利技术的一个实施例，第一图层和第二图层为CSS图层，即第一图层和第二图层可以用HTML中的CSS代码来实现。例如第一图层和第二图层的CSS代码如下(I)第一图层(layer_A)的初始CSS代码为#layer_A{display:1niine_block ;float: left;height:164px;margin-right 27px;overflow:hidden;position:relative;width:226px;}其中，layer_A的CSS样式属性包括display (显示)inline_block (对象呈递为内联对象，但是对象的内容作为块对象呈递)、float (浮动)left (左浮动)、height (高度)164px (高度 164px)、margin-right (右边缘)27px (距离右边 27px)、overflow (溢出)hidden (隐藏溢出)、position (位置)relative (相对定位)、width (宽度)226px(宽度226px)。通过第一图层(layer_A)的四个CSS样式属性height、width、overflow和position，为第二图层(layer_B)构造了一个封闭的、相对定位的父元素，该父元素为第一图层(layer_A),子元素为第二图层(layer_B)。(2)第二图层(layer_B)的初始CSS代码为#本文档来自技高网...

【技术保护点】
一种页面显示的方法，所述页面包括第一图层和与所述第一图层相关联的第二图层，且所述第二图层隐藏显示，所述方法包括步骤：检测用户在页面上的操作位置，当所述操作位置从所述第一图层的范围之外进入所述第一图层的范围之内时，触发在所述第一图层之上叠加显示所述第二图层；逐步改变所述第二图层的位置，直到所述第二图层的位置达到所述第一图层范围内的第一预定位置为止；使所述第二图层停止移动达第一预定时间；以及将所述第二图层的位置从所述第一预定位置设置为所述第一图层之上的第二预定位置。

【技术特征摘要】
1.一种页面显示的方法，所述页面包括第一图层和与所述第一图层相关联的第二图层，且所述第二图层隐藏显示，所述方法包括步骤 检测用户在页面上的操作位置，当所述操作位置从所述第一图层的范围之外进入所述第一图层的范围之内时，触发在所述第一图层之上叠加显示所述第二图层； 逐步改变所述第二图层的位置，直到所述第二图层的位置达到所述第一图层范围内的第一预定位置为止； 使所述第二图层停止移动达第一预定时间；以及 将所述第二图层的位置从所述第一预定位置设置为所述第一图层之上的第二预定位置。2.根据权利要求1所述的方法，其中，所述第二图层处于位于所述第一图层的底部的不可见区域中来隐藏显示。3.根据权利要求1所述的方法，其中，所述用户在页面上的操作位置从所述第一图层的范围之外进入所述第一图层的范围之内通过将光标滑动到所述第一图层上和/或点击所述第一图层来实现。4.根据权利要求1所述的方法，其中，所述第一预定位置和所述第二预定位置分别位于所述第一图层上的两个不同的位置。5.根据权利要求1所述的方法，其中，在所述将第二图层从所述第一预定位置移动至所述第一图层之上的第二预定位置的步骤之后，所述方法还包括 当用户在页面上的操作离开所述第一图层时，隐藏所述第二图层。6.根据权利要求1-5中任一所述的方法，其中， 所述页面以HTML格式编写，所述第二图层是所述第一图层的子元素。7.根据权利要求6中所述的方法，其中， 所述第一图层和所述第二图层为CSS图层。8.根据权利要求7所述的方法，其中， 所述隐藏所述第二图层的步骤包括将所述第二图层绝对定位在所述第一图层中底部的不可见区域中。9.根据权利要求6-8中任一所述的方法，其中，所述将所述第二图层的位置从所述第一预定位置设置为所述第一图层之上的第二预定位置的步骤包括 设置所述第二图层的CSS样式属性，使所述第二图层的位置属性改变至所述第二预定位置。10.根据权利要求6-9中任一所述的方法，所述当用户在页面上的操作离开所述第一图层时，隐藏所述第二图层的步骤包括 通过设置所述第二图层的CSS...

【专利技术属性】
技术研发人员：曾轶，王海，黄欢，
申请(专利权)人：北京奇虎科技有限公司，奇智软件北京有限公司，
类型：发明
国别省市：