CN105786329A - 网页按钮渲染方法和装置 - Google Patents

Abstract

本发明涉及一种网页按钮渲染方法，所述方法包括：检测光标是否悬停在网页按钮上；当检测到所述光标悬停在所述网页按钮上时，获取所述网页按钮的网页按钮标签；提取所述网页按钮标签相应的用于渲染运动背景层的渲染数据；根据所述运动背景层的渲染数据重新渲染所述网页按钮，使所述运动背景层在所述网页按钮中展开，以将所述运动背景层添加到所述网页按钮中。在检测到光标悬停在网页按钮上时，对网页按钮重新渲染，在渲染过程中，使得运动背景层在页面按钮中展开，将运动背景层添加到网页按钮中。这样当光标悬停在网页按钮上时，使得网页按钮更加突出，更容易吸引用于点击网页按钮，从而提高了网页按钮的点击率。

Description

网页按钮渲染方法和装置

技术领域

本发明涉及页面渲染技术领域，特别是涉及一种网页按钮的渲染方法和装置。

背景技术

传统的网页按钮设计主要是通过用户界面来设计网页按钮的，而通过用户界面设计的网页按钮颜色比较单调。在浏览网页时，用户会通过移动光标来点击网页按钮，由于网页按钮的颜色比较单调，很难吸引用户去点击网页按钮，从而降低了网页按钮的点击率。

发明内容

基于此，有必要针对网页按钮的点击率低下的问题，提供一种网页按钮的渲染方法。

一种网页按钮渲染方法，所述方法包括：

检测光标是否悬停在网页按钮上；

当检测到所述光标悬停在所述网页按钮上时，获取所述网页按钮的网页按钮标签；

提取所述网页按钮标签相应的运动背景层的渲染数据；

根据所述运动背景层的渲染数据重新渲染所述网页按钮，使所述运动背景层在所述网页按钮中展开，以将所述运动背景层添加到所述网页按钮中。

在其中一个实施例中，所述检测光标是否悬停在网页按钮上的步骤包括：

获取网页按钮的位置信息；

记录光标的位置信息；

比较所述光标的位置信息和所述网页按钮的位置信息，以检测所述光标是否悬停在所述网页按钮上。

在其中一个实施例中，所述运动背景层在所述网页按钮中展开的过程中，所述运动背景层的高度与所述网页按钮的高度一致，所述运动背景层的宽度从0逐渐增加到所述网页按钮的宽度。。

在其中一个实施例中，所述将所述运动背景层添加到所述网页按钮中之后，还包括：

检测所述光标是否离开所述网页按钮；

在检测到所述光标离开所述网页按钮时，再次获取所述网页按钮的网页按钮标签；

提取所述网页按钮标签相应的网页按钮的默认渲染数据；

根据所述网页按钮的默认渲染数据重新渲染所述网页按钮。

在其中一个实施例中，所述将所述运动背景层添加到所述网页按钮中之后，还包括：

检测所述运动背景层的宽度；

当检测到所述运动背景层的宽度与所述网页按钮的宽度相等时，跳转到所述网页按钮相应的网页。

上述页面按钮渲染方法，在检测到光标悬停在网页按钮上时，对网页按钮重新渲染，在渲染过程中，使得运动背景层在页面按钮中展开，将运动背景层添加到网页按钮中。这样当光标悬停在网页按钮上时，使得网页按钮更加突出，更容易吸引用于点击网页按钮，从而提高了网页按钮的点击率。

一种网页按钮渲染装置，所述装置包括：

光标检测模块，用于检测光标是否悬停在网页按钮上；

按钮标签获取模块，用于当检测到所述光标悬停在所述网页按钮上时，获取所述网页按钮的网页按钮标签；

渲染数据提取模块，用于提取所述网页按钮标签相应的运动背景层的渲染数据；

按钮渲染模块，用于根据所述运动背景层的渲染数据重新渲染所述网页按钮，使所述运动背景层在所述网页按钮中展开，以将所述运动背景层添加到所述网页按钮中。

在其中一个实施例中，所述光标检测模块包括：

按钮位置获取模块，用于获取网页按钮的位置信息；

光标位置记录模块，用于记录光标的位置信息；

位置信息比较模块，用于比较所述光标的位置信息和所述网页按钮的位置信息，以检测所述光标是否悬停在所述网页按钮上。

在其中一个实施例中，所述按钮渲染模块还用于在所述运动背景层在所述网页按钮中展开的过程中，所述运动背景层的高度与所述网页按钮的高度一致，使所述运动背景层的宽度从0逐渐增加到所述网页按钮的宽度。

在其中一个实施例中，所述装置还包括：

所述光标检测模块还用于检测所述光标是否离开所述网页按钮；

所述按钮标签获取模块还用于在检测到所述光标离开所述网页按钮时，再次获取所述网页按钮的网页按钮标签；

所述渲染数据提取模块还用于提取所述网页按钮标签相应的网页按钮的默认渲染数据；

所述按钮渲染模块还用于根据所述网页按钮的默认渲染数据重新渲染所述网页按钮。

在其中一个实施例中，所述装置还包括：

宽度检测模块，用于检测所述运动背景层的宽度；

网页跳转模块，用于当检测到所述运动背景层的宽度与所述网页按钮的宽度相等时，跳转到所述网页按钮相应的网页。

上述页面按钮渲染装置，在检测到光标悬停在网页按钮上时，对网页按钮重新渲染，在渲染过程中，使得运动背景层在页面按钮中展开，将运动背景层添加到网页按钮中。这样当光标悬停在网页按钮上时，使得网页按钮更加突出，更容易吸引用于点击网页按钮，从而提高了网页按钮的点击率。

附图说明

图1为一个实施例中网页按钮渲染方法的流程示意图；

图2为一个实施例中检测光标是否悬停在网页按钮上的步骤的流程示意图；

图3为一个实施例中光标离开网页按钮后重新渲染网页按钮的步骤的流程示意图；

图4为一个实施例中网页跳转步骤的流程示意图；

图5为一个实施例中网页按钮渲染装置的结构框图；

图6为一个实施例中光标检测模块的结构框图；

图7为一个实施例中网页按钮渲染装置的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，在一个实施例中，提供一种网页按钮渲染方法，该方法具体包括以下步骤：

步骤102，检测光标是否悬停在网页按钮上。

具体地，光标也称作游标，在显示屏幕中指示用户输入位置或选择位置的指示标记。光标的悬停是指用户在电脑中移动光标时，当光标停在某一点达到一定时间的状态。在浏览网页时，浏览器会检测光标的移动位置，并记录光标在网页按钮的某一点的停留时间，停留时间到达预设时间时，则光标悬停在网页按钮上。

步骤104，当检测到光标悬停在网页按钮上时，获取网页按钮的网页按钮标签。

具体地，当浏览器检测到光标停在网页按钮上时，浏览器开始计时，当所计时间达到预设时间时，则判定光标悬停在网页按钮上。浏览器获取提取网页按钮的标识，并提取与网页按钮的标识对应的网页按钮标签。网页按钮标签是用于创建按钮的网页标记。

步骤106，提取网页按钮标签相应的用于渲染运动背景层的渲染数据。

具体地，在对网页按钮标签进行编辑时，针对网页按钮编辑了相应的运动背景层。浏览器在获取到网页按钮标签之后，提取与网页按钮标签对应的运动背景层的渲染数据。运动背景层用于为网页按钮增加运动效果的背景。

在一个实施例中，浏览器从网页标签中提取运动背景层的渲染文档的标识或路径，根据提取到的渲染文档的标识或路径获取渲染文件。运动背景层的渲染文档中包括渲染运动背景层的渲染数据。

步骤108，根据运动背景层的渲染数据重新渲染网页按钮，使运动背景层在网页按钮中展开，以将运动背景层添加到网页按钮中。

具体地，在浏览器提取到与网页按钮对应的运动背景层的渲染数据之后，利用运动背景层的渲染数据对网页按钮进行渲染，通过渲染将运动背景层添加到网页按钮中，根据渲染数据对运动背景层进行展开动作设置，使运动背景层在网页按钮中根据预设展开方式进行展开。

在一个实施例中，运动背景层的颜色不同于网页按钮的背景颜色，且运动背景层的颜色与网页按钮的背景颜色存在一定色差。在运动背景层在网页按钮中展开的过程中，运动背景层的高度与网页按钮的高度一致，浏览器将运动背景层的宽度从0逐渐增加到网页按钮的宽度，以实现网页按钮的逐渐展开的效果。

本实施例中，在检测到光标悬停在网页按钮上时，对网页按钮重新渲染，在渲染过程中，使得运动背景层在页面按钮中展开，将运动背景层添加到网页按钮中。这样当光标悬停在网页按钮上时，使得网页按钮更加突出，更容易吸引用户点击网页按钮，从而提高了网页按钮的点击率。

如图2所示，在一个实施例中，步骤102具体包括如下步骤：

步骤202，获取网页按钮的位置信息。

具体地，浏览器在渲染网页按钮的时候，获取网页按钮相对于网页顶端的位置信息，并将获取到的网页按钮的位置信息存储。网页按钮的位置信息可以是相对于网页顶端的坐标信息，也可以是网页按钮在显示屏幕中的坐标信息。网页按钮的坐标信息具体可以是网页按钮的坐标范围。

步骤204，记录光标的位置信息。

在光标在浏览器所显示页面中移动时，浏览器记录当前光标所在点的位置信息。光标的位置信息可以是相对于浏览器中所显示网页的网页顶端的位置信息，也可以是光标在显示屏幕中的坐标信息。光标的坐标信息具体可以是光标所在点的坐标。

步骤206，比较光标的位置信息和网页按钮的位置信息，以检测光标是否悬停在网页按钮上。

具体地，光标的位置信息具体可以是光标所在点在显示屏幕中的坐标或相对于页面顶端的坐标，网页按钮的位置信息具体可以显示屏幕中的坐标范围或者相对于页面顶端的坐标范围，其中光标的位置信息和网页的位置信息的参照对象必须相同。判断光标所在点的坐标是否在网页按钮的坐标范围之内，如果在，则表明光标在网页按钮上，如果不在则光标不在网页按钮上。

在一个实施例中，在利用光标的位置信息和网页按钮的位置信息判定光标在网页按钮上时，则浏览器在光标停在网页按钮上时开始计时。当所计时间达到预设时间时，则判定光标悬停在网页按钮上。预设时间可以设置为5秒至10秒。

本实施例中，利用光标的位置信息和网页按钮的位置信息来判断按钮是否在网页按钮上，提高了确定光标是否在悬停在网页按钮上的准确性。

如图3所示，在一个实施例中，网页按钮渲染方法还包括光标离开网页按钮后重新渲染网页按钮的步骤，具体包括如下步骤：

步骤302，检测光标是否离开网页按钮。

具体地，获取当前光标所在点的位置信息，判断当前光标所在点的位置信息是否在网页按钮的位置信息范围之内，如果当前光标所在点的位置信息不在网页按钮的位置信息范围之内，表示光标已经离开网页按钮。

步骤304，在检测到光标离开网页按钮时，再次获取网页按钮的网页按钮标签。

具体地，浏览器再次获取网页按钮的网页按钮标签，网页按钮中编辑有与网页按钮标签相应的默认渲染数据，具体包括网页按钮的背景颜色和字体颜色等。

步骤306，提取网页按钮标签相应的网页按钮的默认渲染数据。

具体地，浏览器再次获取网页按钮标签之后，浏览器在网页按钮标签中提取网页按钮的默认渲染数据；或者，浏览器在网页按钮标签中提取网页按钮的默认渲染文档的标识或者路径，根据默认渲染文档的标识或者路径获取默认渲染文档，默认渲染文档中包括网页按钮的默认渲染数据。网页按钮的默认渲染数据是在光标未悬停在网页按钮上时，用来渲染网页按钮的数据。网页按钮的默认渲染数据具体可以包括网页按钮的背景颜色和字体颜色。

步骤308，根据网页按钮的默认渲染数据重新渲染网页按钮。

具体地，在获取到网页按钮的默认渲染数据后，浏览器根据默认渲染数据再次对网页按钮进行渲染，将网页按钮的渲染成默认的背景颜色和默认的字体颜色，以去除运动背景层。

本实施例中，在检测到光标离开网页按钮时，重新对网页按钮进行渲染，恢复网页按钮的默认背景颜色，并去除网页按钮的运动背景层。

如图4所示，在一个实施例中，页面按钮渲染方法还包括页面跳转的步骤，具体包括以下步骤：

步骤402，检测运动背景层的宽度。

具体地，在运动背景层在网页按钮中展开的过程中，浏览器将运动背景层的宽度从0逐渐增加到网页按钮的宽度。在此过程中，浏览器按照预定间隔时间检测运动背景层的宽度。

步骤404，当检测到运动背景层的宽度与网页按钮的宽度相等时，跳转到网页按钮相应的网页。

具体地，浏览器将检测到的运动背景层的宽度与网页按钮的宽度进行比较，当运动背景层的宽度与网页按钮的宽度相等时，则浏览器获取与网页按钮相应网页的渲染数据，并根据渲染数据渲染与网页按钮相应的网页。

本实施例中，通过检测运动背景层的宽度来跳转网页，避免了对网页按钮的点击，使得访问网页更加便捷。

如图5所示，在一个实施例中，提供一种网页按钮渲染装置500，该装置包括：光标检测模块502、按钮标签获取模块504、渲染数据提取模块506和按钮渲染模块508。

光标检测模块502，用于检测光标是否悬停在网页按钮上。

按钮标签获取模块504，用于当检测到光标悬停在网页按钮上时，获取网页按钮的网页按钮标签。

渲染数据提取模块506，用于提取网页按钮标签相应的运动背景层的渲染数据。

按钮渲染模块508，用于根据运动背景层的渲染数据重新渲染网页按钮，使运动背景层在网页按钮中展开，以将运动背景层添加到网页按钮中。

本实施例中，在检测到光标悬停在网页按钮上时，对网页按钮重新渲染，在渲染过程中，使得运动背景层在页面按钮中展开，将运动背景层添加到网页按钮中。这样当光标悬停在网页按钮上时，使得网页按钮更加突出，更容易吸引用于点击网页按钮，从而提高了网页按钮的点击率。

如图6所示，在一个实施例中，光标检测模块502包括：按钮位置获取模块502a、光标位置记录模块502b和位置信息比较模块502c。

按钮位置获取模块502a，用于获取网页按钮的位置信息。

光标位置记录模块502b，用于记录光标的位置信息。

位置信息比较模块502c，通过比较光标的位置信息和网页按钮的位置信息来确定光标是否在网页按钮上。

本实施例中，利用光标的位置信息和网页按钮的位置信息来判断按钮是否在网页按钮上，提高了判断光标是否在悬停在网页按钮上的准确性。

在一个实施例中，运动背景层在网页按钮中展开的过程中，所述运动背景层的高度与所述网页按钮的高度一致，运动背景层的宽度从0逐渐增加到所述网页按钮的宽度。

在一个实施例中，光标检测模块502还用于检测光标是否离开网页按钮。

按钮标签获取模块504还用于在检测到光标离开网页按钮时，再次获取网页按钮的网页按钮标签。

渲染数据提取模块506还用于提取网页按钮标签相应的网页按钮的默认渲染数据。

按钮渲染模块508还用于根据网页按钮的默认渲染数据重新渲染网页按钮。

本实施例中，在检测到光标离开网页按钮时，重新对网页按钮进行渲染，恢复网页按钮的默认背景颜色，并去除网页按钮的运动背景层。

如图7所示，在一个实施例中，网页按钮渲染装置500还包括：宽度检测模块510和网页跳转模块512。

宽度检测模块510，用于检测运动背景层的宽度。

网页跳转模块512，用于当检测到运动背景层的宽度与网页按钮的宽度相等时，跳转到网页按钮相应的网页。

本实施例中，通过检测运动背景层的宽度来跳转网页，避免了对网页按钮的点击，使得访问网页更加便捷。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种网页按钮渲染方法，所述方法包括：

检测光标是否悬停在网页按钮上；

当检测到所述光标悬停在所述网页按钮上时，获取所述网页按钮的网页按钮标签；

提取所述网页按钮标签相应的用于渲染运动背景层的渲染数据；

根据所述运动背景层的渲染数据重新渲染所述网页按钮，使所述运动背景层在所述网页按钮中展开，以将所述运动背景层添加到所述网页按钮中。

2.根据权利要求1所述的方法，其特征在于，所述检测光标是否悬停在网页按钮上的步骤包括：

获取网页按钮的位置信息；

记录光标的位置信息；

比较所述光标的位置信息和所述网页按钮的位置信息，以检测所述光标是否悬停在所述网页按钮上。

3.根据权利要求1所述的方法，其特征在于，所述运动背景层在所述网页按钮中展开的过程中，所述运动背景层的高度与所述网页按钮的高度一致，所述运动背景层的宽度从0逐渐增加到所述网页按钮的宽度。

4.根据权利要求1所述的方法，其特征在于，所述将所述运动背景层添加到所述网页按钮中之后，还包括：

检测所述光标是否离开所述网页按钮；

在检测到所述光标离开所述网页按钮时，再次获取所述网页按钮的网页按钮标签；

提取所述网页按钮标签相应的网页按钮的默认渲染数据；

根据所述网页按钮的默认渲染数据重新渲染所述网页按钮。

5.根据权利要求1所述的方法，其特征在于，所述将所述运动背景层添加到所述网页按钮中之后，还包括：

检测所述运动背景层的宽度；

当检测到所述运动背景层的宽度与所述网页按钮的宽度相等时，跳转到所述网页按钮相应的网页。

6.一种网页按钮渲染装置，其特征在于，所述装置包括：

光标检测模块，用于检测光标是否悬停在网页按钮上；

按钮标签获取模块，用于当检测到所述光标悬停在所述网页按钮上时，获取所述网页按钮的网页按钮标签；

渲染数据提取模块，用于提取所述网页按钮标签相应的运动背景层的渲染数据；

按钮渲染模块，用于根据所述运动背景层的渲染数据重新渲染所述网页按钮，使所述运动背景层在所述网页按钮中展开，以将所述运动背景层添加到所述网页按钮中。

7.根据权利要求6所述的装置，其特征在于，所述光标检测模块包括：

按钮位置获取模块，用于获取网页按钮的位置信息；

光标位置记录模块，用于记录光标的位置信息；

位置信息比较模块，用于比较所述光标的位置信息和所述网页按钮的位置信息，以检测所述光标是否悬停在所述网页按钮上。

8.根据权利要求6所述的装置，其特征在于，所述按钮渲染模块还用于在所述运动背景层在所述网页按钮中展开的过程中，所述运动背景层的高度与所述网页按钮的高度一致，使所述运动背景层的宽度从0逐渐增加到所述网页按钮的宽度。

9.根据权利要求6所述的装置，其特征在于，所述光标检测模块还用于检测所述光标是否离开所述网页按钮；

所述按钮标签获取模块还用于在检测到所述光标离开所述网页按钮时，再次获取所述网页按钮的网页按钮标签；

所述渲染数据提取模块还用于提取所述网页按钮标签相应的网页按钮的默认渲染数据；

所述按钮渲染模块还用于根据所述网页按钮的默认渲染数据重新渲染所述网页按钮。

10.根据权利要求6所述的装置，其特征在于，所述装置还包括：

宽度检测模块，用于检测所述运动背景层的宽度；

网页跳转模块，用于当检测到所述运动背景层的宽度与所述网页按钮的宽度相等时，跳转到所述网页按钮相应的网页。