[发明专利]网页元素移位方法及装置

说明书

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

技术领域

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

背景技术

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

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

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

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

发明内容

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

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

为目标网页元素创建容器元素，所述容器元素包括所述目标网页元素；

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

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

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

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

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

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

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

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