CN104063118B - 一种网页内容的点击显示方法及装置 - Google Patents

Abstract

本发明实施例公开了一种网页内容的点击显示方法及装置，其中，所述方法包括：接收对网页内容的点击事件；确定点击事件对应的点击对象，查找并复制所述点击对象所对应的内容数据，所述复制得到的复制内容数据包括数字、文本以及图片中的任一种或多种；通过设置在网页中显示所述复制内容数据的显示调整属性，控制在网页中显示所述复制内容数据；其中，设置显示调整属性包括设置CSS中的不透明度opacity属性和/或字体font属性。采用本发明，可以实现按钮等网页页面对象的渐变动画显示，能够在用户点击了网页页面上的按钮等对象后，较为明显地向用户反馈当前用户的点击有效。

Description

一种网页内容的点击显示方法及装置

技术领域

本发明涉及网页内容显示技术领域，尤其涉及一种网页内容的点击显示方法及装置。

背景技术

目前常用的WAP（Wireless Application Protocol，无线应用协议）是一项全球性的网络通信协议，用户可以借助无线手持设备，如智能手机，平板电脑等智能移动设备，通过WAP获取信息。例如，可以通过在智能手机中安装微型浏览器，借助WAP接入互联网Internet，获取互联网资源。

目前，在WAP类门户网站的页面上，用户在点击一个页面上的按钮、或者页面上的链接、或者页面上的图片等对象时，智能移动设备一般能够通过振动的方式来向用户反馈用户当前的点击已成功。发明人在实施现有技术时发现，采用振动的现有技术比较费电，如果用户关掉点击振动功能，用户可能并不知道其当前的点击是否有效，有可能会使用户出现多次点击产生不必要的误操作。

发明内容

本发明实施例所要解决的技术问题在于，提供一种网页内容的点击显示方法及装置，可以在点击事件发生后通过渐变的动画显示的方式反馈用户当前点击有效。

为了解决上述技术问题，本发明实施例提供了一种网页内容的点击显示方法，包括：

接收对网页内容的点击事件；

确定点击事件对应的点击对象，查找并复制所述点击对象所对应的内容数据，所述复制得到的复制内容数据包括数字、文本以及图片中的任一种或多种；

通过设置在网页中显示所述复制内容数据的显示调整属性，控制在网页中显示所述复制内容数据；

其中，设置显示调整属性包括设置CSS中的不透明度opacity属性和/或字体font属性。

相应地，本发明实施例还提供了一种网页内容的点击显示装置，包括：

事件检测模块，用于接收对网页内容的点击事件；

内容复制模块，用于确定点击事件对应的点击对象，查找并复制所述点击对象所对应的内容数据，所述复制得到的复制内容数据包括数字、文本以及图片中的任一种或多种；

渐变显示模块，用于通过设置在网页中显示所述复制内容数据的显示调整属性，控制在网页中显示所述复制内容数据；

其中，设置显示调整属性包括设置CSS中的不透明度opacity属性和/或字体font属性。

本发明实施例在接收到用户的点击事件后，能够复制相应的内容数据，并通过修改包括不透明度和/或字体属性的显示调整属性的方式，来控制复制的内容数据在网页上显示，实现了复制内容数据的渐变显示，使得向用户的点击反馈较为明显，避免了可能产生的多次重复操作的产生。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例的一种网页内容的点击显示方法的流程示意图；

图2是本发明实施例的另一种网页内容的点击显示方法的流程示意图；

图3是本发明实施例的一种网页内容的点击显示装置的结构示意图；

图4是图3中的渐变显示模块的其中一种具体结构示意图；

图5是图3中的内容复制模块的其中一种具体结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

图1是本发明实施例的一种网页内容的点击显示方法的流程示意图，本发明实施例的所述方法可应用于各类网页中，可以在网页上的文字、数字以及图片等内容被点击后，动画显示对应的内容。具体的，本发明实施例的所述方法包括：

S101：接收对网页内容的点击事件。

具体可以为用户在智能手机、平板电脑等带触控屏幕的设备上的点击操作。

S102：确定点击事件对应的点击对象，查找并复制所述点击对象所对应的内容数据，所述内容数据包括数字、文本以及图片中的任一种或多种。

具体的，可以基于DOM（Document Object Model，文档对象模型）树查找并复制所述点击对象所对应的内容数据。DOM是一种与浏览器、平台、语言无关的接口，使得你可以访问页面其他的标准组件。DOM是以层次结构组织的节点或信息片断的集合，这个层次结构允许开发人员在树中导航查找页面的特定信息。

根据用户的点击操作的位置坐标可以确定用户当前在页面上点击的对象，该点击操作的点击对象可以是页面上的一个按钮对象，当用户点击了该按钮后，再基于DOM树找到相应节点中该按钮对应的内容数据，并复制该内容数据。

S103：通过设置在网页中显示所述复制内容数据的的显示调整属性控制显示所述复制内容数据；

其中，设置显示调整属性包括设置CSS中的不透明度opacity属性和/或字体font属性。CSS（Cascading Style Sheet，级联样式表），通常又称为“风格样式表”，它是用来进行网页风格设计的，在CSS中用于控制文字、数字以及图片等页面内容显示的相关属性包括：CSS背景、CSS文本、CSS字体、CSS轮廓、CSS框模型等等。本发明实施例通过对这些属性的调整，实现复制内容数据在页面上的渐变显示。

需要说明的是，在S103中显示复制内容数据后，即执行现有的点击事件响应操作。执行点击事件响应操作具体可以通过现有的各种方式实现，在此不赘述。

具体可以根据预置的不透明度值设置不透明度opacity属性，例如设置10%、50%至90%的不透明度，通过设置不同的不透明度，可以产生复制的文字、数字以及图片等内容逐渐消失的动画。而字体font属性则可以包括文字的字体、大小、粗细等属性，通过预置的字体值、多个大小值以及粗细值设置字体font属性，例如设置宋体，大小为12px、14px、18px等，通过设置字体属性，可以产生字体内容逐渐变大后消失的动画。具体的，可以同时设置不透明度和字体，从而使得复制的文字、数字图片等内容逐渐变大，变更为透明，直至消失的动画。能够较好地反馈给用户其当前点击已成功。

当然，还可以通过修改其他的CSS中的显示调整属性来控制复制的文字、数字以及图片等内容的渐变动画。例如，CSS的背景background属性等，实现复制的文字、数字以及图片等内容的背景渐变的动画。

其中，当复制内容数据为文字，设置CSS中的显示调整属性中的字体font属性之前，还可以先检测复制内容数据为文字时的文字字体，并调整CSS中的显示调整属性中的字体font属性中的字体属性font style为检测得到的文字字体。

在WAP等类型的网页上一般包括大量的文字、数字以及照片，还有携带文字、数字以及图片的超链接、按钮等内容，本发明实施例能够在用户点击到这些内容后，对这些内容对应的内容数据复制后渐变显示给用户。

本发明实施例在接收到用户的点击事件后，能够复制相应的内容数据，并通过修改包括不透明度和/或字体属性的显示调整属性的方式，来控制复制的内容数据在页面上的显示，实现了在WAP等类型的网页中对相应点击的内容数据进行渐变显示，使得向用户的点击反馈较为明显，避免了可能产生的多次重复操作。

再请参见图2，是本发明实施例的另一种网页内容的点击显示方法的流程示意图，本发明实施例的所述方法包括：

S201：接收对网页内容的点击事件。

当用户用手指或者其他输入笔点击智能手机、平板电脑等设备的触摸屏时，智能手机或者平板电脑能够检测到点击事件，并对点击事件进行处理。

WAP等类型的网页上一般包括大量的文字、数字以及照片等，还有携带文字、数字以及图片的超链接、按钮等，用户可以根据需要，限定渐变显示的对象，本发明实施例中以限定在用户点击到按钮时对按钮对应的内容数据进行的相应操作为例进行说明。

S202：确定点击事件对应的点击对象，查找并复制所述点击对象所对应的内容数据，所述复制得到的复制内容数据包括数字、文本以及图片中的任一种或多种。

根据点击事件确定对应的点击对象为现有技术，在此不赘述。本发明实施例中，所述S202包括：确定点击事件对应的点击对象；判断所述点击事件对应的点击对象是否为按钮对象；若是，则基于DOM树查找并复制所述点击对象所对应的内容数据。即在所述S202中，若用户限定渐变动画显示的对象为按钮对象时，在接收到点击事件时，会先判断该点击事件是否为点击了页面上的按钮，若是，才执行基于DOM树查找并复制所述点击对象所对应的内容数据。否则，执行现有的点击事件响应处理流程。这样可以在不需要反馈时，节约软硬件资源，也不会影响现有的点击事件响应。

S203：在发生所述点击事件的位置显示所述复制内容数据。

S204：根据预设的用于实现渐变显示的至少两个不透明度值和/或至少两个字体大小值，设置在网页中显示所述复制内容数据的显示调整属性。

S205：根据设置的显示调整属性，控制显示的所述复制内容数据的不透明度和/或字体大小，以在网页中渐变显示所述复制的内容数据。

根据点击事件的位置，确定复制内容数据的渐变显示的位置，具体是在点击事件对于的按钮所处的位置的上层，覆盖显示复制内容数据。并根据设置的CSS中的显示调整属性中的至少两个不透明度值和/或至少两个字体大小值实现渐变显示，例如根据不透明度值和字体大小值，从不透明、半透明直到10%不透明，以及字体对应地从原始大小到12px大小、14px大小直到18px大小进行覆盖显示。

S206：判断所述复制内容数据的显示是否结束；

其中，判断所述渐变显示层显示所述复制的内容数据是否结束包括：判断显示所述复制内容数据的透明度是否达到最低值或判断显示所述复制内容数据的字体大小值是否达到最大值。

S207：若结束，删除所述复制内容数据。即反馈结束，删掉不必要的复制内容数据，并执行现有的点击事件响应操作。

进一步的，在接收到点击事件后，对于一些投票类型的按钮，且按钮对应的内容数据包括数字时，还包括改变所述数字的数值，例如在原数字的基础上加1，或者减1等改变方式。具体可以在改变数字的数值后进行上述的S202至S207的渐变动画显示过程，也可以是在执行了上述的S202至S207的渐变动画显示过程后，改变所述数字的数值。

本发明实施例在接收到用户的点击事件后，能够复制相应的内容数据，并通过修改CSS中的包括不透明度和/或字体属性的显示调整属性的方式，来控制复制的内容数据的显示，可以实现在WAP等类型的网页中对相应点击的内容数据进行渐变显示，向用户的点击反馈较为明显，避免了可能产生的多次重复操作。并且还能够在显示结束时，删除掉复制内容数据，使得网页以及手机等智能手机中都不会存在关于这些复制内容的垃圾数据。

下面对本发明实施例的网页内容的点击显示装置进行详细说明。

再请参见图3，是本发明实施例的一种网页内容的点击显示装置的结构示意图，本发明实施例的所述装置可以应用在智能手机、平板电脑等智能终端设备中，具体的，所述装置包括：

事件检测模块1，用于接收对网页内容的点击事件；

内容复制模块2，用于确定点击事件对应的点击对象，查找并复制所述点击对象所对应的内容数据，所述复制得到的复制内容数据包括数字、文本以及图片中的任一种或多种；

渐变显示模块3，用于通过设置在网页中显示所述复制内容数据的显示调整属性，控制在网页中显示所述复制内容数据；其中，设置显示调整属性包括设置CSS中的不透明度opacity属性和/或字体font属性。

具体用户在智能手机、平板电脑等带触控屏幕的设备上通过手指等输入笔进行点击操作时，所述事件检测模块1可接收到智能手机、平板电脑等带触控屏幕的设备的点击事件。

内容复制模块2在所述事件检测模块1接收到点击事件后，根据用户的点击操作可以确定用户当前在页面上点击的对象，该点击操作的点击对象可以是页面上的一个按钮对象，当用户点击了该按钮后，再基于DOM树找到相应位置节点中该按钮对应的内容数据，并复制该内容数据。

所述渐变显示模块3可以在点击操作当前所点击的对象所在位置处，覆盖显示所述内容复制模块2复制得到的复制内容数据。

其中，当复制内容数据为文字，所述渐变显示模块3设置CSS中的显示调整属性中的字体font属性之前，还可以先检测复制内容数据为文字时的文字字体，并调整CSS中的显示调整属性中的字体font属性中的字体属性font style为检测得到的文字字体。

在WAP等类型的网页上一般包括大量的文字、数字以及照片，还有携带文字、数字以及图片的超链接、按钮等内容，本发明实施例的所述渐变显示模块3能够在用户点击到这些内容后，对这些内容对应的内容数据复制后渐变显示给用户。

本发明实施例在接收到用户的点击事件后，能够复制相应的内容数据，并通过修改CSS中的包括不透明度和/或字体属性的显示调整属性的方式，来控制复制的内容数据的显示，可以实现在WAP等类型的网页中对相应点击的内容数据进行渐变显示，向用户的点击反馈较为明显，避免了可能产生的多次重复操作。

具体的，请参见图4，是图3中的渐变显示模块的其中一种具体结构示意图，所述渐变显示模块3包括：

第一显示控制单元31，用于在发生所述点击事件的位置显示所述复制内容数据；

设置单元32，用于根据预设的用于实现渐变显示的至少两个不透明度值和/或至少两个字体大小值，设置在网页中显示所述复制内容数据的显示调整属性；

第二显示控制单元33，用于根据设置的CSS中的显示调整属性，控制显示的所述复制内容数据的不透明度和/或字体大小，以在网页中渐变显示所述复制的内容数据。

根据点击事件的位置，确定复制内容数据的渐变显示的位置，第一显示控制单元31具体是在点击事件对于的按钮所处的位置的上层，覆盖显示复制内容数据。第二显示控制单元33根据设置模块32设置的CSS中的显示调整属性中的至少两个不透明度值和/或至少两个字体大小值实现渐变显示，例如根据不透明度值和字体大小值，从不透明、半透明直到10%不透明，以及字体对应地从原始大小到12px大小、14px大小直到18px大小进行覆盖显示。

进一步的，再请参见图4，所述渐变显示模块3还可以包括：

显示内容判断单元34，用于判断所述复制内容数据的显示是否结束；

显示内容删除单元35，用于在结束时，删除所述复制内容数据；

其中，所述显示内容判断单元34判断所述渐变显示层显示所述复制的内容数据是否结束时，所述显示内容判断单元34用于判断显示所述复制内容数据的透明度是否达到最低值或判断显示所述复制内容数据的字体大小值是否达到最大值。

进一步的，再请参见图5，是图3中的内容复制模块2的其中一种具体结构示意图，所述内容复制模块2包括：

确定单元21，用于确定点击事件对应的点击对象；

判断单元22，用于判断所述点击事件对应的点击对象是否为按钮对象；

复制单元23，用于在判断为是时，基于DOM树查找并复制所述点击对象所对应的内容数据。

如上述，WAP等类型的网页上一般包括大量的文字、数字以及照片等，还有携带文字、数字以及图片的超链接、按钮等。对于这些页面内容，用户可以根据需要，限定渐变显示的对象，本发明实施例中以限定在用户点击到按钮时对按钮对应的内容数据进行的相应操作为例进行说明。

若用户限定渐变动画显示的对象为按钮对象时，在接收到点击事件时，所述确定单元21确定点击事件对应的点击对象后，判断单元22会先判断该点击事件对于的点击对象是否为页面上的按钮，若是，才由复制单元23执行基于DOM树查找并复制所述点击对象所对应的内容数据。否则，执行现有的点击事件响应处理流程。

进一步的，所述装置还可以包括：

数字改变模块，用于当所述内容数据包括数字时，改变所述数字的数值。

在接收到点击事件后，对于一些投票类型的按钮，且按钮对应的内容数据包括数字时，可通过所述数字改变模块改变数字的数值，例如在原数字的基础上加1，或者减1等改变方式。

本发明实施例在接收到用户的点击事件后，能够复制相应的内容数据，并通过修改CSS中的包括不透明度和/或字体属性的显示调整属性的方式，来控制复制的内容数据的显示，可以实现在WAP等类型的网页中对相应点击的内容数据进行渐变显示，向用户的点击反馈较为明显，避免了可能产生的多次重复操作。并且还能够在显示结束时，删除掉复制内容数据，使得网页以及手机等智能手机中都不会存在关于这些复制内容的垃圾数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体（Read-Only Memory，ROM）或随机存储记忆体（Random AccessMemory，RAM）等。

以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。

Claims (10)

1.一种网页内容的点击显示方法，其特征在于，包括：

接收对网页内容的点击事件；

确定点击事件对应的点击对象，查找并复制所述点击对象所对应的内容数据，所述复制得到的复制内容数据包括数字、文本以及图片中的任一种或多种，其中是基于文档对象模型树查找并复制所述点击对象所对应的内容数据；

通过设置在网页中显示所述复制内容数据的显示调整属性，控制在网页中显示所述复制内容数据；

其中，设置显示调整属性包括设置CSS中的不透明度opacity属性和/或字体font属性。

2.如权利要求1所述的方法，其特征在于，所述通过设置在网页中显示所述复制内容数据的显示调整属性，控制在网页中显示所述复制内容数据，包括：

在发生所述点击事件的位置显示所述复制内容数据；

根据预设的用于实现渐变显示的至少两个不透明度值和/或至少两个字体大小值，设置在网页中显示所述复制内容数据的显示调整属性；

根据设置的显示调整属性，控制显示的所述复制内容数据的不透明度和/或字体大小，以在网页中渐变显示所述复制的内容数据。

3.如权利要求2所述的方法，其特征在于，所述通过设置在网页中显示所述复制内容数据的显示调整属性，控制在网页中显示所述复制内容数据，还包括：

判断所述复制内容数据的显示是否结束；

若结束，删除所述复制内容数据；

其中，判断所述渐变显示层显示所述复制的内容数据是否结束包括：判断显示所述复制内容数据的透明度是否达到最低值或判断显示所述复制内容数据的字体大小值是否达到最大值。

4.如权利要求1-3任一项所述的方法，其特征在于，所述确定点击事件对应的点击对象，查找并复制所述点击对象所对应的内容数据，包括：

确定点击事件对应的点击对象；

判断所述点击事件对应的点击对象是否为按钮对象；

若是，则基于DOM树查找并复制所述点击对象所对应的内容数据。

5.如权利要求4所述的方法，其特征在于，还包括：

当所述内容数据包括数字时，改变所述数字的数值。

6.一种网页内容的点击显示装置，其特征在于，包括：

事件检测模块，用于接收对网页内容的点击事件；

内容复制模块，用于确定点击事件对应的点击对象，查找并复制所述点击对象所对应的内容数据，所述复制得到的复制内容数据包括数字、文本以及图片中的任一种或多种，其中是基于文档对象模型树查找并复制所述点击对象所对应的内容数据；

渐变显示模块，用于通过设置在网页中显示所述复制内容数据的显示调整属性，控制在网页中显示所述复制内容数据；

其中，设置显示调整属性包括设置CSS中的不透明度opacity属性和/或字体font属性。

7.如权利要求6所述的装置，其特征在于，所述渐变显示模块包括：

第一显示控制单元，用于在发生所述点击事件的位置显示所述复制内容数据；

设置单元，用于根据预设的用于实现渐变显示的至少两个不透明度值和/或至少两个字体大小值，设置在网页中显示所述复制内容数据的显示调整属性；

第二显示控制单元，用于根据设置的显示调整属性，控制显示的所述复制内容数据的不透明度和/或字体大小，以在网页中渐变显示所述复制的内容数据。

8.如权利要求7所述的装置，其特征在于，所述渐变显示模块还包括：

显示内容判断单元，用于判断所述复制内容数据的显示是否结束；

显示内容删除单元，用于在结束时，删除所述复制内容数据；

其中，所述显示内容判断单元判断所述渐变显示层显示所述复制的内容数据是否结束时，所述显示内容判断单元用于判断显示所述复制内容数据的透明度是否达到最低值或判断显示所述复制内容数据的字体大小值是否达到最大值。

9.如权利要求6-8任一项所述的装置，其特征在于，所述内容复制模块包括：

确定单元，用于确定点击事件对应的点击对象；

判断单元，用于判断所述点击事件对应的点击对象是否为按钮对象；

复制单元，用于在判断为是时，基于DOM树查找并复制所述点击对象所对应的内容数据。

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

数字改变模块，用于当所述内容数据包括数字时，改变所述数字的数值。