CN106775651B - 网页元素移位方法及装置 - Google Patents

网页元素移位方法及装置 Download PDF

Info

Publication number
CN106775651B
CN106775651B CN201611055342.9A CN201611055342A CN106775651B CN 106775651 B CN106775651 B CN 106775651B CN 201611055342 A CN201611055342 A CN 201611055342A CN 106775651 B CN106775651 B CN 106775651B
Authority
CN
China
Prior art keywords
area
target
web page
container
shifting
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201611055342.9A
Other languages
English (en)
Other versions
CN106775651A (zh
Inventor
周钲然
李焕雄
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Guangzhou Kugou Computer Technology Co Ltd
Original Assignee
Guangzhou Kugou Computer Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Guangzhou Kugou Computer Technology Co Ltd filed Critical Guangzhou Kugou Computer Technology Co Ltd
Priority to CN201611055342.9A priority Critical patent/CN106775651B/zh
Publication of CN106775651A publication Critical patent/CN106775651A/zh
Application granted granted Critical
Publication of CN106775651B publication Critical patent/CN106775651B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

网页元素移位方法及装置
技术领域
本发明涉及互联网技术领域，特别涉及一种网页元素移位方法及装置。
背景技术
随着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(TouchPanel，触摸面板)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件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 OxideSemiconductor，互补金属氧化物)或CCD(Charge-coupled Device，电荷耦合元件)图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件514还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。
通信组件516被配置为便于装置500和其他设备之间有线或无线方式的通信。装置500可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件516经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件516还包括NFC(Near Field Communication,近场通信)模块，以促进短程通信。例如，在NFC模块可基于RFID(Radio FrequencyIdentification,射频识别)技术，IrDA(Infra-red Data Association,红外数据协会)技术，UWB(Ultra Wideband,超宽带)技术，BT(Bluetooth,蓝牙)技术和其他技术来实现。
在示例性实施例中，装置500可以被一个或多个ASIC(Application SpecificIntegrated Circuit,应用专用集成电路)、DSP(Digital signal Processor,数字信号处理器)、DSPD(Digital signal Processor Device，数字信号处理设备)、PLD(ProgrammableLogic Device,可编程逻辑器件)、FPGA)(Field Programmable Gate Array,现场可编程门阵列)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。
在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器504，上述指令可由装置500的处理器520执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是ROM、RAM(Random Access Memory,随机存取存储器)、CD-ROM(Compact Disc Read-Only Memory,光盘只读存储器)、磁带、软盘和光数据存储设备等。
一种非临时性计算机可读存储介质，当所述存储介质中的指令由网页元素移位装置的处理器执行时，使得网页元素移位装置能够执行上述网页元素移位方法。
本领域技术人员在考虑说明书及实践这里发明的发明后，将容易想到本发明的其它实施方案。本申请旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未发明的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求指出。
应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

Claims (10)

1.一种网页元素移位方法，其特征在于，所述方法包括：
为目标网页元素创建容器元素，所述容器元素包括所述目标网页元素；
在所述容器元素中设置所述目标网页元素的移位属性，所述移位属性用于触发所述容器元素对鼠标的指针悬停操作进行响应；
当检测到所述指针悬停操作时，基于所述移位属性，触发所述容器元素包含的所述目标网页元素产生移位；
所述容器元素扩大覆盖区域，包括：
确定所述容器元素的第一区域，所述第一区域为所述容器元素响应所述指针悬停操作之前覆盖的区域，所述第一区域包括所述目标网页元素的原始区域，所述原始区域为所述目标网页元素产生移位前覆盖的区域；
基于所述第一区域和所述目标网页元素的目标区域，确定第二区域，所述目标区域为所述目标网页元素产生移位后覆盖的区域，所述第二区域为所述容器元素响应所述指针悬停操作之后覆盖的区域，所述第二区域包括所述第一区域和所述目标区域。
2.根据权利要求1所述的方法，其特征在于，所述基于所述第一区域和所述目标网页元素的目标区域，确定第二区域，包括：
基于所述目标区域的大小和方位，对所述第一区域进行区域扩大，使得扩大后的第一区域包括所述目标区域，得到所述第二区域。
3.根据权利要求1所述的方法，其特征在于，所述基于所述移位属性，触发所述容器元素包含的所述目标网页元素产生移位，包括：
获取所述移位属性中的移位参数信息；
基于所述移位参数信息，确定所述目标网页元素的目标区域；
将所述目标网页元素移位至所述目标区域，并在所述目标区域显示所述目标网页元素的动画效果。
4.根据权利要求1或2所述的方法，其特征在于，所述在所述容器元素中设置所述目标网页元素的移位属性，包括：
获取所述目标网页元素的移位参数信息，所述移位参数信息至少包括距离信息和方向信息；
生成所述移位属性，所述移位属性至少包括所述移位参数信息；
将所述移位属性设置在所述容器元素中。
5.根据权利要求1所述的方法，其特征在于，所述目标网页元素为待产生移位的子文件对象模型DOM节点；
所述容器元素为包括所述目标网页元素的父DOM节点。
6.一种网页元素移位装置，其特征在于，所述装置包括：
创建模块，用于为目标网页元素创建容器元素，所述容器元素包括所述目标网页元素；
设置模块，用于在所述容器元素中设置所述目标网页元素的移位属性，所述移位属性用于触发所述容器元素对鼠标的指针悬停操作进行响应；
触发模块，用于当检测到所述指针悬停操作时，基于所述移位属性，触发所述容器元素包含的所述目标网页元素产生移位；所述容器元素扩大覆盖区域；
所述装置还包括：
确定模块，用于确定所述容器元素的第一区域，所述第一区域为所述容器元素响应所述指针悬停操作之前覆盖的区域，所述第一区域包括所述目标网页元素的原始区域，所述原始区域为所述目标网页元素产生移位前覆盖的区域；
所述确定模块，还用于基于所述第一区域和所述目标网页元素的目标区域，确定第二区域，所述目标区域为所述目标网页元素产生移位后覆盖的区域，所述第二区域为所述容器元素响应所述指针悬停操作之后覆盖的区域，所述第二区域包括所述第一区域和所述目标区域。
7.根据权利要求6所述的装置，其特征在于，所述确定模块，还用于基于所述目标区域的大小和方位，对所述第一区域进行区域扩大，使得扩大后的第一区域包括所述目标区域，得到所述第二区域。
8.根据权利要求6所述的装置，其特征在于，所述触发模块，用于获取所述移位属性中的移位参数信息；基于所述移位参数信息，确定所述目标网页元素的目标区域；将所述目标网页元素移位至所述目标区域，并在所述目标区域显示所述目标网页元素的动画效果。
9.根据权利要求6或7所述的装置，其特征在于，所述设置模块，用于获取所述目标网页元素的移位参数信息，所述移位参数信息至少包括距离信息和方向信息；生成所述移位属性，所述移位属性至少包括所述移位参数信息；将所述移位属性设置在所述容器元素中。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储至少一条指令，所述指令被处理器执行时实现权利要求1-5任一所述的网页元素移位方法。
CN201611055342.9A 2016-11-25 2016-11-25 网页元素移位方法及装置 Active CN106775651B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201611055342.9A CN106775651B (zh) 2016-11-25 2016-11-25 网页元素移位方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201611055342.9A CN106775651B (zh) 2016-11-25 2016-11-25 网页元素移位方法及装置

Publications (2)

Publication Number Publication Date
CN106775651A CN106775651A (zh) 2017-05-31
CN106775651B true CN106775651B (zh) 2020-10-09

Family

ID=58913052

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201611055342.9A Active CN106775651B (zh) 2016-11-25 2016-11-25 网页元素移位方法及装置

Country Status (1)

Country Link
CN (1) CN106775651B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109117211A (zh) * 2017-06-22 2019-01-01 合网络技术（北京）有限公司 对象控制方法及装置

Family Cites Families (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8521857B2 (en) * 2006-08-24 2013-08-27 Bby Solutions, Inc. Systems and methods for widget rendering and sharing on a personal electronic device
CN101261642A (zh) * 2008-04-10 2008-09-10 深圳市迅雷网络技术有限公司 一种调整互联网页面布局的方法及装置
US8843849B2 (en) * 2009-11-09 2014-09-23 Blackberry Limited Directional navigation of page content
CN102306174B (zh) * 2011-08-24 2014-01-15 百度在线网络技术（北京）有限公司 一种基于网页元素与用户进行互动的方法与设备
CN103164191B (zh) * 2011-12-08 2017-07-11 腾讯科技（深圳）有限公司 网页元素拖拽方法和装置
US9389703B1 (en) * 2014-06-23 2016-07-12 Amazon Technologies, Inc. Virtual screen bezel
CN105242817B (zh) * 2014-07-07 2019-09-03 阿里巴巴集团控股有限公司 页面元素实时突出显示的方法及装置
CN104182505B (zh) * 2014-08-19 2018-03-27 小米科技有限责任公司 网页重排方法和装置
CN105512124B (zh) * 2014-09-23 2019-09-17 腾讯科技（深圳）有限公司 在网页中实现文本编辑器悬浮的方法和装置
CN104346461B (zh) * 2014-11-07 2018-05-04 北京奇虎科技有限公司 搜索网页元素的方法、装置和浏览器客户端

Also Published As

Publication number Publication date
CN106775651A (zh) 2017-05-31

Similar Documents

Publication Publication Date Title
CN109683761B (zh) 内容收藏方法、装置及存储介质
US10509540B2 (en) Method and device for displaying a message
CN106294609B (zh) 页面加载方法及装置
CN106657780B (zh) 图像预览方法和装置
US10095377B2 (en) Method and device for displaying icon badge
US20170293403A1 (en) Method and device for displaying pages in application program and computer-readable medium
CN110231901B (zh) 应用界面显示方法及装置
EP3128411B1 (en) Interface display method, terminal, computer program and recording medium
CN110704059B (zh) 图像处理方法、装置、电子设备及存储介质
US9959487B2 (en) Method and device for adding font
CN107239351B (zh) 粘贴方法及装置
CN110968364B (zh) 添加快捷插件的方法、装置及智能设备
CN106504295B (zh) 渲染图片的方法及装置
US11367232B2 (en) Method and device for generating stickers
CN105389083B (zh) 大字体实现方法和装置、智能终端
KR20160032713A (ko) 커서의 위치 결정 방법, 장치, 프로그램 및 기록매체
CN106527886B (zh) 图片显示方法及装置
CN105468606B (zh) 网页保存的方法及装置
CN106708958B (zh) 浏览器内核的排版结构展现方法及装置
CN106773750B (zh) 设备图像显示方法及装置
CN110085066B (zh) 展示阅读信息的方法、装置及电子设备
CN107168969B (zh) 一种页面元素控制方法、装置及电子设备
CN108829473B (zh) 事件响应方法、装置及存储介质
CN106775651B (zh) 网页元素移位方法及装置
CN107920015B (zh) 发布图片的方法和发布图片的装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information
CB02 Change of applicant information

Address after: 510660 Guangzhou City, Guangzhou, Guangdong, Whampoa Avenue, No. 315, self - made 1-17

Applicant after: Guangzhou KuGou Networks Co., Ltd.

Address before: 510000 B1, building, No. 16, rhyme Road, Guangzhou, Guangdong, China 13F

Applicant before: Guangzhou KuGou Networks Co., Ltd.

GR01 Patent grant
GR01 Patent grant