页面显示的方法及设备的制作方法

专利名称：页面显示的方法及设备的制作方法
技术领域：
本发明涉及计算机技术领域，具体涉及一种页面显示的方法及设备。
背景技术：
图层提供了一种对页面对象进行有效控制的手段，图层可以包括文本、图片、表格、插件，也可以在图层里面嵌套其他图层。在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代码为#layer_B{display:block ；height:136px;left:14px;position:absolute;top:178px;width:198px;z-1ndex:100;}其中，第二图层(layer_B)的CSS样式属性包括display (显示)block (块对象);height (高度)136px (高度 136px); left (左边距)14px (距离左边 14px); position(位置):absolute (绝对定位);top (顶边距)178px (距离顶部 178px); width (宽度)198px(宽度 198px) ; z-1ndex (z 轴方向高度):100 (z-1ndex 属性值 100)。第二图层(layer_B)的position设为绝对定位(absolute),而且第二图层(layer_B)的top的值比第一图层(layer_A)的height的值更大,使得第二图层(layer_B)绝对定位在第一图层(layer_A)中底部的不可见区域。根据本发明的一个实施例，第二图层是第一图层的一个子元素，当第二图层和第一图层不发生叠加时，显示第一图层。当发生叠加时，第二图层将叠加在第一图层上，此时第一图层和第二图层可展示为两个点击按钮，用户通过点击第一图层和第二图层可分别链接到不同的网址。下面介绍第一图层(layer_A)和第二图层(layer_B)设置在页面中的HTML代码<//' id= "layer A ”〉
<span id f'layer B”><a largel " blank1' href !,hlip://frmino. wan. 360.cn src==360wan-jp-frmmo " class "mask conlerU link”〉〈span class "mask conIenI iii”><h3.> 仙剑情<M、3><e.m> 用色扮演</em > </span >
<span class=”mask—contentJxff>仙剑经典传承，重温美好'回忆。完美2D即时战斗游戏大作，修仙养宠^寻找你的梦中情人。</span>
</a>
<spcm class= "mask amnteri bin "><a class= "new!l large! " blank" href "hllpi/ffnmno.wan. 360. cn/ganic login.php scrvcr id SI07Samp;src 36(hvan-jp-frmmo”> 进入
新区</a>
<a class "start" largel= " bkuik" href "hllp///rmino.wan. 360. cn src=3 eOwan-jp-frmmo "> 开始游戏</u >
</span> </span>
<span classwidih "226" height= "164" all ”仙剑情”sn: "hllp://p4.qhimg.c om/i()16a9ebeafa()f()59bc.jpg"> </span>
li>随后，在步骤S120中，隐藏第二图层。可选地，可通过如下设置来实现隐藏显示第二图层将第二图层处于位于第一图层的底部的不可见区域中。当第一图层和第二图层为CSS图层时，在步骤S120中将第二图层绝对定位在第一图层中底部的不可见区域中。隐藏第二图层的CSS代码可参见上述介绍第二图层的初始CSS代码的部分。随后，在步骤S130中，检测用户在页面上的操作位置，当操作位置从第一图层的范围之外进入第一图层的范围之内时，触发在第一图层之上叠加显示第二图层。可选地，用户在页面上的操作位置从第一图层的范围之外进入第一图层的范围之内可通过将光标滑动到第一图层上和/或点击第一图层来实现。也就是，在第一图层上绑定鼠标进入的事件onmouseenter。当鼠标进入第一图层时，触发在第一图层之上叠加显示第二图层。在第一图层上绑定鼠标进入的事件的代码示例如下
$('iilayer A ').on('mouse.enier', JiinciionQ/
I/第二图层(layer B )平滑地进入第一图层(layer A )。在第二图层(layer—B )即将到达第一预定位置时，会停止平缓滑动;//停顿片刻后(毫秒级的停顿，例如50毫秒),然后改成以跳跃的方式直接到达预定的位置σ
smoolhEnter(//平滑动作完成后的回调函数,以执行下一步的动作funclionO /
//首先使用setTimeout函数停顿50毫秒,然后第二图层(layer B )以跳跃的方式直接到达第二预定的位置
seiTimeoiiUfnnciionO {
Il跳跃移动至第二预定位置 skipEnterQ:1 50);
I
);
}随后，在步骤S140中，逐 步改变第二图层的位置，直到第二图层的位置达到第一图层范围内的第一预定位置为止。可选地，第二图层平滑叠加在第一图层上，直到第二图层的位置达到第一图层范围内的第一预定位置为止，该第一预定位置可以是第二图层的顶部距离第一图层的顶部为
预定距离时的位置。例如可使用开源Javascript框架-JQuery中的动画函数animate
来实现逐步改变第二图层的位置，该函数的说明如下函数animate (properties, [duration], [easing], [callback])参数Properties :一组CSS样式属性,动画将按照上述属性移动。Duration :一个字符串或者数字决定动画将运行多久。
Easing :要使用的擦除效果的名称,默认jQuery提供"linear"和"swing"。Callback (回调函数)在动画完成时执行的函数。通过animate函数,第二图层的CSS样式属性top的取值从初始值平滑地减少至预定距离值(例如IOpxjP 10像素)，也就是第二图层平滑的移动到离第一图层的顶部相差IOpx的第一预定位置时，会执行下述的步骤S150。当然可以理解的是，在本发明的实施例中并不限定上述预定距离值的具体取值范围。实现步骤S140的代码如下
//第二图层(layer B )平滑进入第一图层(layer A )。第二图层(layer B )的顶部离第一图层(layer A )的顶部相差IOpx时，停止移动第二图层·(layer B )，进而调用回调函数callbackfunction smoolh1:.nier(callback) {
//{'topMWpx'}表示第二图层的顶部离第一图层的顶部相差10像素时,第二图层(layer B )停止移动
//150指的是该动画效果将在150毫秒内完成
//swing是默认的动画擦除效果
// callback 是 smoothEnter 的回调函数
V '!layer B ,).animaie({ ορ'I Opx V, 150, 'swing', callback);
}随后，在步骤S150中，使第二图层停止移动达到第一预定时间。随后，在步骤S160中，将第二图层的位置从第一预定位置设置为第一图层之上的第二预定位置。可选地，第一预定位置和第二预定位置分别位于第一图层上的两个不同的位置。根据本发明的一个实施例，可采用下列方式将第二图层的位置从第一预定位置设置为第一图层之上的第二预定位置，以实现第二图层以跳跃的方式达到第一图层之上的第二预定位置。即，设置第二图层的CSS样式属性，使第二图层的位置属性被设置为第二预定位置。具体到上述步骤中，在步骤S150中，当第二图层平滑地到达距离第一图层顶部IOpx处的第一预定位置后，停止移动第二图层第一预定时间(例如50毫秒)，然后在步骤S160中设置第二图层的CSS样式属性，使得第二图层以跳跃的方式“瞬间”到达第二预定位置，代码示例如下//第二图层(layer B )以跳跃方式到达第二预定位置
Jiuiciion skipl,:nl.er() {
//通过设置第二图层(layer B )的CSS样式属性，使得第二图层(layer B )展现在第二预定位置:{'top':Opx'}
$('lilayer B'). css ({ ορ ρχ'});
}
//停顿50毫秒
set I imcou (funciion () {
//跳跃移动至第二预定位置skip Enier () }，50);在步骤S160之后，整个方法可以直接结束。但为了增强用户体验的效果，使得用户操作完成后，可以隐藏第二图层，可以在步骤S160之后再执行步骤S170。在步骤S170中，当用户在页面上的操作离开第一图层时，隐藏第二图层。具体地，通过设置第二图层的CSS样式属性，使第二图层处于第一图层下方的不可见区域。例如鼠标离开第一图层时，将会重置第一图层和第二图层的CSS样式属性，重新隐藏第二图层。例如，使用JQuery的函数animate,将第二图层(layer_B)的CSS样式属性top从O渐变至178px，从而能够实现隐藏第二图层(layer_B)的目的。实现隐藏第二图层的CSS代码如下
// .在第一图层(layer A )上绑定monseJeave事件 SCiilayer A 'j.onfmouseleave, funcl1.onQf
Sf'illayer B').aninialeff'lop'178px'/, 150, 'swing', callback);
});需要说明的是，图1所示的方法并不限定按所示的各步骤的顺序进行，可以根据需要调整各步骤的先后顺序，另外，所述步骤也不限定于上述步骤划分，上述步骤可以进一步拆分成更多步骤也可以合并成更少步骤，例如将步骤SllO拆分为两个步骤，也可以讲步骤SllO与步骤S120合并。下面结合图2说明根据本发明一个实施例的、适于解决上述问题的一种页面显示的设备200。如图2所示，本发明的实施例中页面显示的设备200包括检测模块210和第二图层呈现模块220。为了说明方便起见，图2中还示出了页面20、以及在页面20中的第一图层201和与第一图层201相关联的第二图层203，且第二图层203隐藏显示。可选地，第二图层203处于位于第一图层201的底部的不可见区域中来隐藏显示。可选地，第一图层和第二图层为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代码为#layer_B{display:block ；height:136px;left:14px;position:absolute;top:178px;width:198px;z-1ndex:100;}其中，第二图层(layer_B)的CSS样式属性包括display (显示)block (块对象);height (高度)136px (高度 136px); left (左边距)14px (距离左边 14px); position(位置):absolute (绝对定位);top (顶边距)178px (距离顶部 178px); width (宽度)198px(宽度 198px) ; z-1ndex (z 轴方向高度):100 (z-1ndex 属性值 100)。第二图层(layer_B)的position设为绝对定位(absolute),而且第二图层(layer_B)的top的值比第一图层(layer_A)的height的值更大,使得第二图层(layer_B)绝对定位在第一图层(layer_A)中底部的不可见区域。检测模块210检测用户在页面20上的操作位置，当操作位置从第一图层201的范围之外进入第一图层201的范围之内时，发送触发在第一图层201之上叠加显示第二图层203的消息。可选地，检测模块210通过检测光标是否滑动到第一图层201上和/或点击第一图层201来判断用户在页面20上的操作位置是否从第一图层201的范围之外进入第一图层201的范围之内。例如在第一图层201上绑定鼠标进入的事件onmouseenter。当检测模块210检测到鼠标的光标滑动到第一图层201上和/或第一图层201附近时，发送触发在第一图层201之上叠加显示第二图层203的消息。在第一图层201上绑定鼠标进入的事
件的代码示例如下$( layer A'). on ('in ouseen terfunci ion (){
//第二图层203 (layer B )平滑地进入第一图层201 (layer A )。在第二图层203 (layer—B)即将到达第一预定位置时，会停止平缓滑动;//停顿片刻后(毫秒级的停顿,例如50毫秒)，然后改成以跳跃的方式直接到达预定的位置。
smoothlirUeri
//平滑动作完成后的回调函数，以执行下一步的动作funcl1.onQ {Il首先使用setTimeout函数停顿50毫秒，然后第二图层203(layer B )以跳跃的方式直接到达第二预定的位置sei 7'imeoulffiinciion() {// M兆跃移动至第二预定位置skiplinterQ;}’ 50);
}
)；
}第二图层呈现模块220在接收到检测模块210发出的出发消息之后，首先逐步改变第二图层203的位置，直到第二图层203的位置达到第一图层201范围内的第一预定位置为止，随后使第二图层203在第一预定位置停止移动达第一预定时间，以及在第一预定时间之后，将通过第二图层203 的位置从第一预定位置设置为第一图层201之上的第二预定位置。可选地，第二图层呈现模块202控制第二图层203平滑叠加在第一图层201上，直到第二图层203的位置达到第一图层201范围内的第一预定位置为止。该第一预定位置可以是第二图层203的顶部距离第一图层201的顶部为预定距离(例如ΙΟρχ，即10像素)时
的位置。例如可使用开源Javascript框架-JQuery中的动画函数animate来实现逐步
改变第二图层的位置，通过animate函数,第二图层203的CSS样式属性top的取值从初始值平滑地减少至预定距离(例如ΙΟρχ)。当然可以理解的是，在本发明的实施例中并不限定上述预定距离的具体取值范围。可选地，当第二图层203的顶部离第一图层201的顶部相差IOpx (第一预定位置)时，第二图层呈现模块202控制停止移动第二图层203第一预定时间(例如50毫秒)，然后设置第二图层203的CSS样式属性，使得第二图层203位置属性值被设置为第二预定位置。
根据本发明的另一实施例中，为了增强用户体验的效果，使得用户操作完成后，可以隐藏第二图层203，页面显示的设备200还包括隐藏模块230，当用户在页面20上的操作离开第一图层201时，隐藏模块230隐藏第二图层203。可选地，隐藏模块230通过设置第二图层的CSS样式属性，使第二图层移动至处于第一图层下方的不可见区域。例如鼠标离开第一图层时，将会重置第一图层和第二图层的CSS样式属性,重新隐藏第二图层。例如,使用JQuery的函数animate,将第二图层(layer_B)的CSS样式属性top从O渐变至178px,从而能够实现隐藏第二图层(layer_B)的目的。可选地，页面20以HTML格式编写，第二图层203是第一图层201的子元素。例如第一图层201和第二图层203用HTML中的CSS代码来实现。根据本发明的另一实施例中，隐藏模块230进一步用于将第二图层203绝对定位在第一图层201中底部的不可见区域中。可选地，隐藏模块230进一步用于通过设置第二图层203的CSS样式属性，使第二图层203处于第一图层201下方的不可见区域。例如鼠标离开第一图层201时，将会重置第一图层201和第二图层203的CSS样式属性，重新隐藏第二图层203。可选地,使用JQuery的函数animate,将第二图层203的CSS样式属性top从O渐变至178px，从而能够实现隐藏第二图层203的目的。根据本发明的页面显示的方法及设备，首先逐步改变第二图层的位置，然后当第二图层的位置达到第一图层范围内的第一预定位置时，使第二图层停止移动达第一预定时间，最后将第二图层的位置从第一预定位置设置为第一图层之上的第二预定位置，通过增加叠加显示中的中间过度过程，即当第二图层的位置达到第一图层范围内的第一预定位置时，使第二图层停止移动达第一预定时间，由此降低第二图层在第一图层上的叠加显示过程的跳跃性，从而改善用户的视觉体验。在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式
的权利要求书由此明确地并入该具体实施方式
，其中每个权利要求本身都作为本发明的单独实施例。本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的页面显示的设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
权利要求
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样式属性，使所述第二图层处于所述第一图层下方的不可见区域。
11.一种页面显示的设备，所述页面包括第一图层和与所述第一图层相关联的第二图层，而且所述第二图层隐藏显示，所述设备包括 检测模块，用于检测用户在页面上的操作位置，当所述操作位置从所述第一图层的范围之外进入所述第一图层的范围之内时，发送触发在所述第一图层之上叠加显示所述第二图层的消息；以及第二图层呈现模块，在接收到所述检测模块发送的触发消息之后，适于逐步改变所述第二图层的位置，直到所述第二图层的位置达到所述第一图层范围内的第一预定位置为止；使第二图层停止移动达第一预定时间；以及将所述第二图层的位置从所述第一预定位置设置为所述第一图层之上的第二预定位置。
12.根据权利要求11所述的设备，其中，所述第二图层处于位于所述第一图层的底部的不可见区域中来隐藏显示。
13.根据权利要求11所述的设备，其中，所述用户在页面上的操作位置从所述第一图层的范围之外进入所述第一图层的范围之内通过将光标滑动到所述第一图层上以及点击所述第一图层来实现。
14.根据权利要求11所述的设备，其中，所述第一预定位置和所述第二预定位置分别位于所述第一图层上的两个不同位置。
15.根据权利要求11所述的设备，还包括隐藏模块，用于当用户在页面上的操作离开所述第一图层时，隐藏所述第二图层。
16.根据权利要求11-15中任一所述的设备,其中， 所述页面以HTML格式编写，所述第二图层是所述第一图层的子元素。
17.根据权利要求16中所述的设备，其中， 所述第一图层和所述第二图层为CSS图层。
18.根据权利要求17所述的设备，其中， 所述隐藏模块进一步用于将所述第二图层绝对定位在所述第一图层中底部的不可见区域中。
19.根据权利要求16-18中任一所述的设备，其中， 第二图层呈现模块进一步用于通过设置所述第二图层的CSS，使所述第二图层的位置属性改变至所述第二预定位置。
20.根据权利要求17所述的设备，所述隐藏模块进一步用于通过设置所述第二图层的CSS样式属性，使所述第二图层处于所述第一图层下方的不可见区域。
全文摘要
本发明公开了一种页面显示的方法及设备，其中页面包括第一图层和与第一图层相关联的第二图层，且第二图层隐藏显示，方法包括步骤检测用户在页面上的操作位置，当操作位置从第一图层的范围之外进入第一图层的范围之内时，触发在第一图层之上叠加显示第二图层；逐步改变第二图层的位置，直到第二图层的位置达到第一图层范围内的第一预定位置为止；使第二图层停止移动达第一预定时间；以及将第二图层的位置从第一预定位置设置为第一图层之上的第二预定位置。降低第二图层在第一图层上的叠加显示过程的跳跃性，从而改善用户的视觉体验。
文档编号G06F17/30GK103034410SQ20121053028
公开日2013年4月10日 申请日期2012年12月10日 优先权日2012年12月10日
发明者曾轶, 王海, 黄欢 申请人:北京奇虎科技有限公司, 奇智软件(北京)有限公司