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

技术编号:8562766 阅读:174 留言:0更新日期:2013-04-11 04:22
本发明专利技术公开了一种页面显示的方法及设备,其中页面包括第一图层和与第一图层相关联的第二图层,且第二图层隐藏显示,方法包括步骤:检测用户在页面上的操作位置,当操作位置从第一图层的范围之外进入第一图层的范围之内时,触发在第一图层之上叠加显示第二图层;逐步改变第二图层的位置,直到第二图层的位置达到第一图层范围内的第一预定位置为止;使第二图层停止移动达第一预定时间;以及将第二图层的位置从第一预定位置设置为第一图层之上的第二预定位置。降低第二图层在第一图层上的叠加显示过程的跳跃性,从而改善用户的视觉体验。

【技术实现步骤摘要】

本专利技术涉及计算机
,具体涉及一种页面显示的方法及设备
技术介绍
图层提供了一种对页面对象进行有效控制的手段,图层可以包括文本、图片、表格、插件,也可以在图层里面嵌套其他图层。在HTML (HypertextMarkup Language,超文本标记语言)文档的正文部分可以放置的元素都可以放入图层内。由于图层可以放置在页面的任何位置,从而能有效控制页面中的对象。在现有技术中可通过控制图层的显示或隐藏,以实现页面交互技术,但由于在现有技术中图层从隐藏至完全显示的过程视觉跳跃性较强,影响用户体验。
技术实现思路
鉴于上述问题,提出了本专利技术以便提供一种克服上述问题或者至少部分地解决上述问题的页面显示的方法及设备。依据本专利技术的一个方面,提供了一种页面显示的方法,页面包括第一图层和与第一图层相关联的第二图层,且第二图层隐藏显示,方法包括以下步骤检测用户在页面上的操作位置,当操作位置从第一图层的范围之外进入第一图层的范围之内时,触发在第一图层之上叠加显示第二图层;逐步改变第二图层的位置,直到第二图层的位置达到第一图层范围内的第一预定位置为止;使第二图层停止移动达第一预定时间;以及本文档来自技高网...

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

【技术特征摘要】
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...

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

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1