太阳城集团

  • / 17
  • 下载费用:30 金币  

网页元素移位方法及装置.pdf

摘要
申请专利号:

太阳城集团CN201611055342.9

申请日:

2016.11.25

公开号:

CN106775651A

公开日:

2017.05.31

当前法律状态:

实审

有效性:

审中

法律详情: 著录事项变更IPC(主分类):G06F 9/44变更事项:申请人变更前:广州酷狗计算机科技有限公司变更后:广州酷狗计算机科技有限公司变更事项:地址变更前:510000 广东省广州市天河区科韵路16号B1栋13F变更后:510660 广东省广州市天河区黄埔大道中315号自编1-17|||实质审查的生效IPC(主分类):G06F 9/44申请日:20161125|||公开
IPC分类号: G06F9/44; G06F17/30 主分类号: G06F9/44
申请人: 广州酷狗计算机科技有限公司
发明人: 周钲然; 李焕雄
地址: 510000 广东省广州市天河区科韵路16号B1栋13F
优先权:
专利代理机构: 北京三高永信知识产权代理有限责任公司 11138 代理人: 郭晶
PDF完整版下载: PDF下载
法律状态
申请(专利)号:

CN201611055342.9

授权太阳城集团号:

||||||

法律状态太阳城集团日:

2018.01.23|||2017.06.23|||2017.05.31

法律状态类型:

著录事项变更|||实质审查的生效|||公开

摘要

本发明是太阳城集团一种网页元素移位方法及装置,属于互联网技术领域。所述方法包括:为目标网页元素创建容器元素;在所述容器元素中设置所述目标网页元素的移位属性;当检测到所述指针悬停操作时,基于所述移位属性,触发所述容器元素包含的所述目标网页元素产生移位。本发明通过为待移位的目标网页元素设置容器元素,并在容器元素中设置目标网页元素的移位属性,使得在检测到指针悬停操作触发目标网页元素产生移位时,容器元素的覆盖区域在移位前后始终包括目标网页元素覆盖的区域,因此即便目标网页元素脱离了指针的悬停位置,设置在容器元素中的移位属性仍然生效,不会产生目标网页元素的抖动现象,效果较佳。

权利要求书

1.一种网页元素移位方法,其特征在于,所述方法包括:
为目标网页元素创建容器元素,所述容器元素包括所述目标网页元素;
在所述容器元素中设置所述目标网页元素的移位属性,所述移位属性用于触发所述容
器元素对鼠标的指针悬停操作进行响应;
当检测到所述指针悬停操作时,基于所述移位属性,触发所述容器元素包含的所述目
标网页元素产生移位。
2.根据权利要求1所述的方法,其特征在于,所述触发所述容器元素包含的所述目标网
页元素产生移位之后,所述方法还包括:
确定所述容器元素的第一区域,所述第一区域为所述容器元素响应所述指针悬停操作
之前覆盖的区域,所述第一区域包括所述目标网页元素的原始区域,所述原始区域为所述
目标网页元素产生移位前覆盖的区域;
基于所述第一区域和所述目标网页元素的目标区域,确定第二区域,所述目标区域为
所述目标网页元素产生移位后覆盖的区域,所述第二区域为所述容器元素响应所述指针悬
停操作之后覆盖的区域,所述第二区域包括所述第一区域和所述目标区域。
3.根据权利要求2所述的方法,其特征在于,所述基于所述第一区域和所述目标网页元
素的目标区域,确定第二区域,包括:
基于所述目标区域的大小和方位,对所述第一区域进行区域扩大,使得扩大后的第一
区域包括所述目标区域,得到所述第二区域。
4.根据权利要求1或2所述的方法,其特征在于,所述基于所述移位属性,触发所述容器
元素包含的所述目标网页元素产生移位,包括:
获取所述移位属性中的所述移位参数太阳城集团;
基于所述移位参数太阳城集团,确定所述目标网页元素的目标区域;
将所述目标网页元素移位至所述目标区域,并在所述目标区域显示所述目标网页元素
的动画效果。
5.根据权利要求1或3所述的方法,其特征在于,所述在所述容器元素中设置所述目标
网页元素的移位属性,包括:
获取所述目标网页元素的移位参数太阳城集团,所述移位参数太阳城集团至少包括距离太阳城集团和方向
太阳城集团;
生成所述移位属性,所述移位属性至少包括所述移位参数太阳城集团;
将所述移位属性设置在所述容器元素中。
6.根据权利要求1所述的方法,其特征在于,所述目标网页元素为待产生移位的子文件
对象模型DOM节点;
所述容器元素为包括所述目标网页元素的父DOM节点。
7.一种网页元素移位装置,其特征在于,所述装置包括:
创建模块,用于为目标网页元素创建容器元素,所述容器元素包括所述目标网页元素;
设置模块,用于在所述容器元素中设置所述目标网页元素的移位属性,所述移位属性
用于触发所述容器元素对鼠标的指针悬停操作进行响应;
触发模块,用于当检测到所述指针悬停操作时,基于所述移位属性,触发所述容器元素
包含的所述目标网页元素产生移位。
8.根据权利要求7所述的装置,其特征在于,所述装置还包括:
确定模块,用于确定所述容器元素的第一区域,所述第一区域为所述容器元素响应所
述指针悬停操作之前覆盖的区域,所述第一区域包括所述目标网页元素的原始区域,所述
原始区域为所述目标网页元素产生移位前覆盖的区域;
所述确定模块,还用于基于所述第一区域和所述目标网页元素的目标区域,确定第二
区域,所述目标区域为所述目标网页元素产生移位后覆盖的区域,所述第二区域为所述容
器元素响应所述指针悬停操作之后覆盖的区域,所述第二区域包括所述第一区域和所述目
标区域。
9.根据权利要求8所述的装置,其特征在于,所述确定模块,还用于基于所述目标区域
的大小和方位,对所述第一区域进行区域扩大,使得扩大后的第一区域包括所述目标区域,
得到所述第二区域。
10.根据权利要求7或8所述的装置,其特征在于,所述触发模块,用于获取所述移位属
性中的所述移位参数太阳城集团;基于所述移位参数太阳城集团,确定所述目标网页元素的目标区域;将
所述目标网页元素移位至所述目标区域,并在所述目标区域显示所述目标网页元素的动画
效果。
11.根据权利要求7或9所述的装置,其特征在于,所述设置模块,用于获取所述目标网
页元素的移位参数太阳城集团,所述移位参数太阳城集团至少包括距离太阳城集团和方向太阳城集团;生成所述移位
属性,所述移位属性至少包括所述移位参数太阳城集团;将所述移位属性设置在所述容器元素中。

说明书

网页元素移位方法及装置

技术领域

本发明涉及互联网技术领域,特别涉及一种网页元素移位方法及装置。

背景技术

随着CSS(Cascading Style Sheets,层叠样式表)技术的不断强大,时下在进行网
页设计时,通常会添加鼠标的指针悬停效果。其中,鼠标的指针悬停效果指的是当鼠标的指
针在网页中的目标网页元素上悬停时,目标网页元素产生的诸如立体显示、旋转变换、角度
变化等效果。而在实现这些效果时,往往需要CSS选择器触发目标网页元素产生移位。

相关技术中,为了实现由鼠标的指针悬停触发网页元素移位,CSS选择器需要在目
标网页元素中设置Hover(悬停)属性,再在Hover属性中编写如图1所示的移位代码。这样当
鼠标的指针悬停于目标网页元素上时,CSS选择器会获取到目标网页元素,这样目标网页元
素设置的Hover属性中的移位代码便会生效,进而触发目标网页元素产生移位,达到着重强
调目标网页元素的效果。

在实现本发明的过程中,发明人发现相关技术至少存在以下问题:

当鼠标的指针悬停在目标网页元素上触发目标网页元素移位时,这种移位很有可
能使得目标网页元素脱离了指针的悬停位置,此时目标网页元素中的Hover属性不再生效,
那么目标网页元素便会再次回到上述悬停位置;当目标网页元素回到上述悬停位置后,此
时CSS选择器会再次获取目标网页元素,这样目标网页元素中的Hover属性再次生效,触发
目标网页元素又一次发生移位…如此反复,便会造成目标网页元素的抖动现象,效果不佳。

发明内容

为克服相关技术中存在的问题,本发明提供一种网页元素移位方法及装置。

根据本发明实施例的第一方面,提供一种网页元素移位方法,所述方法包括:

为目标网页元素创建容器元素,所述容器元素包括所述目标网页元素;

在所述容器元素中设置所述目标网页元素的移位属性,所述移位属性用于触发所
述容器元素对鼠标的指针悬停操作进行响应;

当检测到所述指针悬停操作时,基于所述移位属性,触发所述容器元素包含的所
述目标网页元素产生移位。

可选地,所述触发所述容器元素包含的所述目标网页元素产生移位之后,所述方
法还包括:

确定所述容器元素的第一区域,所述第一区域为所述容器元素响应所述指针悬停
操作之前覆盖的区域,所述第一区域包括所述目标网页元素的原始区域,所述原始区域为
所述目标网页元素产生移位前覆盖的区域;

基于所述第一区域和所述目标网页元素的目标区域,确定第二区域,所述目标区
域为所述目标网页元素产生移位后覆盖的区域,所述第二区域为所述容器元素响应所述指
针悬停操作之后覆盖的区域,所述第二区域包括所述第一区域和所述目标区域。

可选地,所述基于所述第一区域和所述目标网页元素的目标区域,确定第二区域,
包括:

基于所述目标区域的大小和方位,对所述第一区域进行区域扩大,使得扩大后的
第一区域包括所述目标区域,得到所述第二区域。

可选地,所述基于所述移位属性,触发所述容器元素包含的所述目标网页元素产
生移位,包括:

获取所述移位属性中的所述移位参数太阳城集团;

基于所述移位参数太阳城集团,确定所述目标网页元素的目标区域;

将所述目标网页元素移位至所述目标区域,并在所述目标区域显示所述目标网页
元素的动画效果。

可选地,所述在所述容器元素中设置所述目标网页元素的移位属性,包括:

获取所述目标网页元素的移位参数太阳城集团,所述移位参数太阳城集团至少包括距离太阳城集团和
方向太阳城集团;

生成所述移位属性,所述移位属性至少包括所述移位参数太阳城集团;

将所述移位属性设置在所述容器元素中。

可选地,所述目标网页元素为待产生移位的子DOM(Document Object Model,文件
对象模型)节点;

所述容器元素为包括所述目标网页元素的父DOM节点。

根据本发明实施例的第二方面,提供一种网页元素移位装置,所述装置包括:

创建模块,用于为目标网页元素创建容器元素,所述容器元素包括所述目标网页
元素;

设置模块,用于在所述容器元素中设置所述目标网页元素的移位属性,所述移位
属性用于触发所述容器元素对鼠标的指针悬停操作进行响应;

触发模块,用于当检测到所述指针悬停操作时,基于所述移位属性,触发所述容器
元素包含的所述目标网页元素产生移位。

可选地,所述装置还包括:

确定模块,用于确定所述容器元素的第一区域,所述第一区域为所述容器元素响
应所述指针悬停操作之前覆盖的区域,所述第一区域包括所述目标网页元素的原始区域,
所述原始区域为所述目标网页元素产生移位前覆盖的区域;

所述确定模块,还用于基于所述第一区域和所述目标网页元素的目标区域,确定
第二区域,所述目标区域为所述目标网页元素产生移位后覆盖的区域,所述第二区域为所
述容器元素响应所述指针悬停操作之后覆盖的区域,所述第二区域包括所述第一区域和所
述目标区域。

可选地,所述确定模块,还用于基于所述目标区域的大小和方位,对所述第一区域
进行区域扩大,使得扩大后的第一区域包括所述目标区域,得到所述第二区域。

可选地,所述触发模块,用于获取所述移位属性中的所述移位参数太阳城集团;基于所述
移位参数太阳城集团,确定所述目标网页元素的目标区域;将所述目标网页元素移位至所述目标
区域,并在所述目标区域显示所述目标网页元素的动画效果。

可选地,所述设置模块,用于获取所述目标网页元素的移位参数太阳城集团,所述移位参
数太阳城集团至少包括距离太阳城集团和方向太阳城集团;生成所述移位属性,所述移位属性至少包括所述移
位参数太阳城集团;将所述移位属性设置在所述容器元素中。

本发明的实施例提供的技术方案可以包括以下有益效果:

本发明通过为待移位的目标网页元素设置容器元素,并在容器元素中设置目标网
页元素的移位属性,使得在检测到指针悬停操作触发目标网页元素产生移位时,容器元素
的覆盖区域在移位前后始终包括目标网页元素覆盖的区域,因此即便目标网页元素脱离了
指针的悬停位置,设置在容器元素中的移位属性仍然生效,不会产生目标网页元素的抖动
现象,效果较佳。

应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不
能限制本发明。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本发明的实施
例,并与说明书一起用于解释本发明的原理。

图1是根据一示例性实施例示出的一种网页元素移位方法的示意图;

图2是根据一示例性实施例示出的一种网页元素移位方法的流程图;

图3A是根据一示例性实施例示出的一种网页元素移位方法的流程图;

图3B是根据一示例性实施例示出的一种网页元素移位方法的示意图;

图3C是根据一示例性实施例示出的一种网页元素移位方法的流程图;

图4A是根据一示例性实施例示出的一种网页元素移位装置的框图;

图4B是根据一示例性实施例示出的一种网页元素移位装置的框图;

图5是根据一示例性实施例示出的一种网页元素移位装置的框图。

具体实施方式

这里将详细地对示例性实施例进行说明,其示例表示在附图中。下面的描述涉及
附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例
中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反,它们仅是与如所附
权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

图2是根据一示例性实施例示出的一种网页元素移位方法的流程图,如图2所示,
包括以下步骤。

在步骤201中,为目标网页元素创建容器元素,该容器元素包括目标网页元素。

在步骤202中,在容器元素中设置目标网页元素的移位属性,移位属性用于触发容
器元素对鼠标的指针悬停操作进行响应。

在步骤203中,当检测到指针悬停操作时,基于移位属性,触发容器元素包含的目
标网页元素产生移位。

本发明实施例提供的方法,通过为待移位的目标网页元素设置容器元素,并在容
器元素中设置目标网页元素的移位属性,使得在检测到指针悬停操作触发目标网页元素产
生移位时,容器元素的覆盖区域在移位前后始终包括目标网页元素覆盖的区域,因此即便
目标网页元素脱离了指针的悬停位置,设置在容器元素中的移位属性仍然生效,不会产生
目标网页元素的抖动现象,效果较佳。

可选地,触发所述容器元素包含的所述目标网页元素产生移位之后,该方法还包
括:

确定容器元素的第一区域,第一区域为容器元素响应指针悬停操作之前覆盖的区
域,第一区域包括目标网页元素的原始区域,原始区域为目标网页元素产生移位前覆盖的
区域;

基于第一区域和目标网页元素的目标区域,确定第二区域,目标区域为目标网页
元素产生移位后覆盖的区域,第二区域为容器元素响应指针悬停操作之后覆盖的区域,第
二区域包括第一区域和目标区域。

可选地,基于第一区域和目标网页元素的目标区域,确定第二区域,包括:

基于目标区域的大小和方位,对第一区域进行区域扩大,使得扩大后的第一区域
包括目标区域,得到第二区域。

可选地,基于移位属性,触发容器元素包含的目标网页元素产生移位,包括:

获取移位属性中的移位参数太阳城集团;

基于移位参数太阳城集团,确定目标网页元素的目标区域;

将目标网页元素移位至目标区域,并在目标区域显示目标网页元素的动画效果。

可选地,在容器元素中设置目标网页元素的移位属性,包括:

获取目标网页元素的移位参数太阳城集团,移位参数太阳城集团至少包括距离太阳城集团和方向信
息;

生成移位属性,移位属性至少包括移位参数太阳城集团;

将移位属性设置在容器元素中。

可选地,目标网页元素为待产生移位的子DOM节点;

所述容器元素为包括所述目标网页元素的父DOM节点。

上述所有可选技术方案,可以采用任意结合形成本发明的可选实施例,在此不再
一一赘述。

图3A是根据一示例性实施例示出的一种网页元素移位方法的流程图,如图3A所
示,包括以下步骤。

在步骤301中,CSS选择器为目标网页元素设置容器元素。

其中,CSS选择器用于实现对web(网络)页面中的网页元素的触发,可以是一个CSS
选择器对一个网页元素进行触发、一个CSS选择器对多个网页元素进行触发或多个CSS选择
器对一个网页元素进行触发,本发明实施例对此不进行具体限定。其中,CSS选择器包括类
别选择器、标签选择器、ID(Identity,标识)选择器、后代选择器等13个选择器。其中,本发
明实施例中涉及到的选择器为后代选择器,后代选择器也称包含选择器,用来选择特定元
素或元素组的后代。在本发明实施例中,这里的特定元素即为容器元素,后代即为目标网页
元素。

目标网页元素为在web页面上待产生移位的子DOM节点,目标网页元素可为web页
面上的任一网页元素。其中,网页元素可包括网页链接、文本、图片、视频、动画或音频等。容
器元素为在web页面上包括目标网页元素的父DOM节点。即,对于目标网页元素来说,CSS选
择器会创建一个包括该目标网页元素的DOM节点,将该DOM节点作为该目标网页元素的容器
元素。其中,创建得到的容器元素覆盖的区域可与目标网页元素覆盖的区域大小一致,或
者,容器元素覆盖的区域也可大于目标网页元素覆盖的区域,本发明实施例对此不进行具
体限定。

需要说明的是,对于一个容器元素来说,本发明实施例仅存在一个与其对应的目
标网页元素,也即容器元素包括的目标网页元素为一个。在目标网页元素发生移位前,容器
元素所覆盖的区域包括目标网页元素的原始区域,其中原始区域为目标网页元素产生移位
前覆盖的区域。

在步骤302中,CSS选择器获取目标网页元素的移位参数太阳城集团,根据移位参数太阳城集团
生成移位属性,并将移位属性设置在目标网页元素的容器元素中。

在本发明实施例中,移位属性用于触发容器元素对鼠标的指针悬停操作进行响
应。其中,移位属性以代码的形式设置在目标网页元素的容器元素中,参照图3B所示,
container(容器)用于指代容器元素,target(目标)用于指代目标网页元素,由图3B中的第
一行代码可知,该移位属性设置在容器元素中。

其中,移位属性中包括移位参数太阳城集团,该移位参数太阳城集团根据需要目标网页元素移
位后产生的效果进行设置,包括距离太阳城集团和方向太阳城集团。参照图3B中第7行至第21行的代码,
该代码即为移位参数太阳城集团。其中,第7行至第17行代码为距离太阳城集团,也即限定了目标网页元
素产生移位时需要移动的距离;第18行至第21行代码为方向太阳城集团,也即限定了目标网页元
素产生移位时,相对于原始区域需要向哪一个方向进行移位。其中,通常来讲,图3B中所示
的距离太阳城集团是以px(Pixel,像素)为单位的。

在步骤303中,当检测到指针悬停操作时,CSS选择器获取容器元素中的目标网页
元素和移位属性中的移位参数太阳城集团。

其中,当CSS选择器检测到指针悬停操作时,会在指针悬停位置所在的容器元素中
获取目标网页元素,并获取容器元素设置的移位属性中的移位参数太阳城集团。CSS选择器在获取
容器元素中的目标网页元素时,会先获取容器元素中设置的移位属性。读取移位属性的代
码,并在移位属性的代码中读取目标网页元素的相关太阳城集团,比如读取目标网页元素的ID,以
便在容器元素中获取目标网页元素。参照图3B,其中代码的第3行和第4行代码指示了容器
元素中包括的目标网页元素。

CSS选择器在获取移位属性中的移位参数太阳城集团时,先获取容器元素中设置的移位
属性,读取移位属性的代码,并在移位属性的代码中读取移位参数太阳城集团对应的代码,以此获
取移位参数太阳城集团。

在步骤304中,基于移位参数太阳城集团,CSS选择器确定目标网页元素的目标区域,将目
标网页元素移位至目标区域,并在目标区域显示目标网页元素的动画效果。

在本发明实施例中,基于移位参数太阳城集团中的距离太阳城集团和方向太阳城集团,确定目标网页
元素的目标区域。其中,目标区域为目标网页元素产生移位后覆盖的区域。例如,若移位参
数太阳城集团中的距离太阳城集团为100像素,方向太阳城集团为右向移位,则确定目标网页元素的原始区域的
右侧,距原始区域100像素的与原始区域同等大小的区域即为目标网页元素的目标区域。

在确定了目标网页元素的目标区域后,将目标网页元素移位至目标区域,并获取
目标网页元素的动画效果,以便在目标区域显示目标网页元素的动画效果。其中,动画效果
可包括立体显示、旋转变换、角度变化、色彩变化、字体大小变化等动画效果,本发明对此不
进行具体限定。

例如,若在检测到指针悬停操作时,目标网页元素实现的动画效果为立体显示,则
将根据目标网页元素创建的容器元素作为背景元素平铺在Div(Division,层叠样式表单
元)中,同时使得Div根据移位属性保持一个默认的立体姿态;当检测到指针悬停操作时,触
发目标网页元素产生移位,使得目标网页元素移位至Div保持的立体姿态的位置,以便实现
目标网页元素的立体显示。若在检测到指针悬停操作时,目标网页元素实现的动画效果为
旋转变换,则在容器元素设置的移位属性的代码中添加目标网页元素旋转变换的角度信
息、方向太阳城集团,以便在检测到指针悬停操作时,触发目标网页元素产生移位,实现目标网页
元素的旋转变换。

需要说明的是,为了保证目标网页元素在移位后保持在当前的目标区域,不会在
原始区域和目标区域之间来回抖动,容器元素会在目标网页元素移位后扩大覆盖区域,保
证其覆盖的区域始终包括目标网页元素,以便在目标网页元素移位后,保持对当前指针悬
停操作的响应,避免产生目标网页元素的抖动现象,因此本发明实施例还包括下述步骤
305。

在步骤305中,CSS选择器确定容器元素响应指针悬停操作之前覆盖的第一区域,
基于目标区域的大小和方位,对第一区域进行区域扩大,使得扩大后的第一区域包括目标
区域,得到第二区域。

在本发明实施例中,将容器元素响应指针悬停操作之前覆盖的区域确定为第一区
域。其中,第一区域包括目标网页元素产生移位前覆盖的原始区域。在根据移位属性太阳城集团确
定目标区域之后,便可确定目标区域所在的方位,进而根据该方位和目标区域大小(即目标
网页元素覆盖的区域大小),便可确定应该向哪一个方向进行第一区域扩大,从而得到第二
区域。其中,第二区域即为容器元素响应指针悬停操作之后覆盖的区域,该第二区域包括第
一区域和目标区域。换句话说,本发明实施例的宗旨就是进行目标网页元素移位前后容器
元素的覆盖区域始终包括有目标网页元素。

举例来说,其中图3C中左侧示意图为产生移位前容器元素与目标网页元素的状
态。其中,容器元素包括目标网页元素,即容器元素当前覆盖的第一区域包括目标网页元素
的原始区域;当检测到指针悬停操作时,目标网页元素产生移位,也即目标网页元素由原始
区域移位至目标区域;当目标网页元素完成移位时,容器元素根据目标网页元素产生移位
后的目标区域,扩大第一区域,得到第二区域,使得第二区域包括目标区域。参见图3C中的
右侧示意图,将第一区域扩大至刚刚包括目标区域与原始区域即可。当然,也可以将第一区
域扩大至更大的范围,本发明实施例对此不进行具体限定。

本发明实施例提供的方法,通过为待移位的目标网页元素设置容器元素,并在容
器元素中设置目标网页元素的移位属性,使得在检测到指针悬停操作触发目标网页元素产
生移位时,容器元素的覆盖区域在移位前后始终包括目标网页元素覆盖的区域,因此即便
目标网页元素脱离了指针的悬停位置,设置在容器元素中的移位属性仍然生效,不会产生
目标网页元素的抖动现象,效果较佳。

图4A是根据一示例性实施例示出的一种网页元素移位装置的框图。参照图4A,该
装置包括创建模块401,设置模块402和触发模块403。

该创建模块401,用于为目标网页元素创建容器元素,该容器元素包括该目标网页
元素;

该设置模块402,用于在容器元素中设置目标网页元素的移位属性,移位属性用于
触发容器元素对鼠标的指针悬停操作进行响应;

该触发模块403,用于当检测到指针悬停操作时,基于移位属性,触发容器元素包
含的目标网页元素产生移位。

可选地,参照图4B,该装置还包括确定模块404。

该确定模块404,用于确定容器元素的第一区域,第一区域为容器元素响应指针悬
停操作之前覆盖的区域,第一区域包括目标网页元素的原始区域,原始区域为目标网页元
素产生移位前覆盖的区域;

该确定模块404,还用于基于第一区域和目标网页元素的目标区域,确定第二区
域,目标区域为目标网页元素产生移位后覆盖的区域,第二区域为容器元素响应指针悬停
操作之后覆盖的区域,第二区域包括第一区域和目标区域。

可选地,该确定模块404,还用于基于目标区域的大小和方位,对第一区域进行区
域扩大,使得扩大后的第一区域包括目标区域,得到第二区域。

可选地,该触发模块403,用于获取移位属性中的移位参数太阳城集团;基于移位参数信
息,确定目标网页元素的目标区域;将目标网页元素移位至目标区域,并在目标区域显示目
标网页元素的动画效果。

可选地,该设置模块402,用于获取目标网页元素的移位参数太阳城集团,移位参数太阳城集团
至少包括距离太阳城集团和方向太阳城集团;生成移位属性,移位属性至少包括移位参数太阳城集团;将移位属
性设置在容器元素中。

本发明实施例提供的装置,通过为待移位的目标网页元素设置容器元素,并在容
器元素中设置目标网页元素的移位属性,使得在检测到指针悬停操作触发目标网页元素产
生移位时,容器元素的覆盖区域在移位前后始终包括目标网页元素覆盖的区域,因此即便
目标网页元素脱离了指针的悬停位置,设置在容器元素中的移位属性仍然生效,不会产生
目标网页元素的抖动现象,效果较佳。

太阳城集团上述实施例中的装置,其中各个模块执行操作的具体方式已经在有关该方法
的实施例中进行了详细描述,此处将不做详细阐述说明。

图5是根据一示例性实施例示出的一种网页元素移位装置500的框图。例如,装置
500可以是移动电话,计算机,数字广播终端,消息收发设备,游戏控制台,平板设备,医疗设
备,健身设备,个人数字助理等。

参照图5,装置500可以包括以下一个或多个组件:处理组件502,存储器505,电源
组件506,多媒体组件508,音频组件510,I/O(Input/Output,输入/输出)的接口512,传感器
组件515,以及通信组件516。

处理组件502通常控制装置500的整体操作,诸如与显示,电话呼叫,数据通信,相
机操作和记录操作相关联的操作。处理组件502可以包括一个或多个处理器520来执行指
令,以完成上述的方法的全部或部分步骤。此外,处理组件502可以包括一个或多个模块,便
于处理组件502和其他组件之间的交互。例如,处理组件502可以包括多媒体模块,以方便多
媒体组件508和处理组件502之间的交互。

存储器504被配置为存储各种类型的数据以支持在装置500的操作。这些数据的示
例包括用于在装置500上操作的任何应用程序或方法的指令,联系人数据,电话簿数据,消
息,图片,视频等。存储器505可以由任何类型的易失性或非易失性存储设备或者它们的组
合实现,如SRAM(Static Random Access Memory,静态随机存取存储器),EEPROM
(Electrically-Erasable Programmable Read-Only Memory,电可擦除可编程只读存储
器),EPROM(Erasable Programmable Read Only Memory,可擦除可编程只读存储器),PROM
(Programmable Read-Only Memory,可编程只读存储器),ROM(Read-Only Memory,只读存
储器),磁存储器,快闪存储器,磁盘或光盘。

电源组件506为装置500的各种组件提供电力。电源组件506可以包括电源管理系
统,一个或多个电源,及其他与为装置500生成、管理和分配电力相关联的组件。

多媒体组件508包括在所述装置500和用户之间的提供一个输出接口的屏幕。在一
些实施例中,屏幕可以包括LCD(Liquid Crystal Display,液晶显示器)和TP(Touch
Panel,触摸面板)。如果屏幕包括触摸面板,屏幕可以被实现为触摸屏,以接收来自用户的
输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所
述触摸传感器可以不仅感测触摸或滑动动作的边界,而且还检测与所述触摸或滑动操作相
关的持续太阳城集团和压力。在一些实施例中,多媒体组件508包括一个前置摄像头和/或后置摄
像头。当装置500处于操作模式,如拍摄模式或视频模式时,前置摄像头和/或后置摄像头可
以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统
或具有焦距和光学变焦能力。

音频组件510被配置为输出和/或输入音频信号。例如,音频组件510包括一个MIC
(Microphone,麦克风),当装置500处于操作模式,如呼叫模式、记录模式和语音识别模式
时,麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器504
或经由通信组件516发送。在一些实施例中,音频组件510还包括一个扬声器,用于输出音频
信号。

I/O接口512为处理组件502和外围接口模块之间提供接口,上述外围接口模块可
以是键盘,点击轮,按钮等。这些按钮可包括但不限于:主页按钮、音量按钮、启动按钮和锁
定按钮。

传感器组件514包括一个或多个传感器,用于为装置500提供各个方面的状态评
估。例如,传感器组件514可以检测到设备500的打开/关闭状态,组件的相对定位,例如组件
为装置500的显示器和小键盘,传感器组件514还可以检测装置500或装置500一个组件的位
置改变,用户与装置500接触的存在或不存在,装置500方位或加速/减速和装置500的温度
变化。传感器组件514可以包括接近传感器,被配置用来在没有任何的物理接触时检测附近
物体的存在。传感器组件514还可以包括光传感器,如CMOS(Complementary Metal Oxide
Semiconductor,互补金属氧化物)或CCD(Charge-coupled Device,电荷耦合元件)图像传
感器,用于在成像应用中使用。在一些实施例中,该传感器组件514还可以包括加速度传感
器,陀螺仪传感器,磁传感器,压力传感器或温度传感器。

通信组件516被配置为便于装置500和其他设备之间有线或无线方式的通信。装置
500可以接入基于通信标准的无线网络,如WiFi,2G或3G,或它们的组合。在一个示例性实施
例中,通信组件516经由广播信道接收来自外部广播管理系统的广播信号或广播相关太阳城集团。
在一个示例性实施例中,所述通信组件516还包括NFC(Near Field Communication,近场通
信)模块,以促进短程通信。例如,在NFC模块可基于RFID(Radio Frequency
Identification,射频识别)技术,IrDA(Infra-red Data Association,红外数据协会)技
术,UWB(Ultra Wideband,超宽带)技术,BT(Bluetooth,蓝牙)技术和其他技术来实现。

在示例性实施例中,装置500可以被一个或多个ASIC(Application Specific
Integrated Circuit,应用专用集成电路)、DSP(Digital signal Processor,数字信号处
理器)、DSPD(Digital signal Processor Device,数字信号处理设备)、PLD(Programmable
Logic Device,可编程逻辑器件)、FPGA)(Field Programmable Gate Array,现场可编程门
阵列)、控制器、微控制器、微处理器或其他电子元件实现,用于执行上述方法。

在示例性实施例中,还提供了一种包括指令的非临时性计算机可读存储介质,例
如包括指令的存储器504,上述指令可由装置500的处理器520执行以完成上述方法。例如,
所述非临时性计算机可读存储介质可以是ROM、RAM(Random Access Memory,随机存取存储
器)、CD-ROM(Compact Disc Read-Only Memory,光盘只读存储器)、磁带、软盘和光数据存
储设备等。

一种非临时性计算机可读存储介质,当所述存储介质中的指令由网页元素移位装
置的处理器执行时,使得网页元素移位装置能够执行上述网页元素移位方法。

本领域技术人员在考虑说明书及实践这里发明的发明后,将容易想到本发明的其
它实施方案。本申请旨在涵盖本发明的任何变型、用途或者适应性变化,这些变型、用途或
者适应性变化遵循本发明的一般性原理并包括本发明未发明的本技术领域中的公知常识
或惯用技术手段。说明书和实施例仅被视为示例性的,本发明的真正范围和精神由下面的
权利要求指出。

应当理解的是,本发明并不局限于上面已经描述并在附图中示出的精确结构,并
且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

关 键 词:
网页 元素 移位 方法 装置
  专利查询网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
太阳城集团本文
本文标题:网页元素移位方法及装置.pdf
链接地址:http://zh228.com/p-6019700.html
太阳城集团我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服客服 - 联系我们

copyright@ 2017-2018 zhuanlichaxun.net网站版权所有
经营许可证编号:粤ICP备17046363号-1 
 


收起
展开
葡京赌场|welcome document.write ('');