一种网页特效实现方法和浏览器的制作方法

文档序号:6576561阅读:476来源:国知局
专利名称:一种网页特效实现方法和浏览器的制作方法
技术领域
本发明涉及计算机信息领域,尤其涉及一种网页特效实现方法和浏览器。
背景技术
随着web技术的不断发展,基于web的应用也越来越多。在计算机上,各种效果绚 丽、视觉冲击力强的恥b页面被越来越多的用户所喜欢和接受。在嵌入式环境下,也要实现 这种效果,就对硬件和支持恥b应用的浏览器等提出了更高的要求。 目前,在开发web页面时,要实现特效,基本的方法就是将元素的大小(width, height),位置(left, top),透明度(opacity) —步一步地进行变化,连续看起来就好像 是动态的变化效果。而在网页中,要实现这种变化,唯一能使用的方法就是将元素标签 的left(距离左边界的值),top(距离上边界的值),width(宽度),height(高度),透 明度(opacity)每移动一步就进行变化一次。比如,通过JavaScript操作文档对象模型 (Document Object Model, DOM)节点的元素,改变其left, top, width, height, opacity的 值,来实现特效。 特效每执行一步,都需要修改left, top, width, height, opacity这五个值中的至 少一个,重新对元素的属性值进行解析和操作。这种频繁的变化每次都会引起浏览器对于 该区域的重新排版,布局和刷新。在嵌入式资源有限的情况下,这样的操作不仅影响速度, 而且对于特效的展现也显得不是那么绚丽和连贯。

发明内容
本发明实施例所要解决的技术问题在于,提供一种网页特效实现方法和浏览器, 可以快速的实现网页特效。 为了解决上述技术问题,本发明实施例提供了一种网页特效实现方法,包括获取 网页标签,并判断所述标签中是否包括特效属性;若判断结果为是,则获取所述标签中设置 的特效类型和特效参数;根据所述特效类型和特效参数显示所述特效;在所述特效显示完 后,更新所述标签。 其中,所述更新所述标签包括获取所述特效属性的特效属性值,根据所述特效属
性值更新所述标签的标准属性值;根据所述标准属性值在网页中显示所述标签。 所述根据所述特效类型和特效参数显示所述特效包括根据所述特效类型和特效
参数通知特效实现模块实现所述特效;显示所述特效实现模块实现的所述特效。 相应地,本发明实施例还提供了一种浏览器,包括属性获取模块,用于获取网页
标签,并判断所述标签中是否包括特效属性;参数获取模块,用于当属性获取模块的判断结
果为是时,获取所述标签中设置的特效类型和特效参数;显示模块,用于根据所述特效类型
和特效参数显示所述特效;更新模块,用于在所述特效显示完后,更新所述标签。 其中,所述更新模块包括值获取子模块,用于获取所述特效属性的特效属性值,
根据所述特效属性值更新所述标签的标准属性值;显示子模块,用于根据所述标准属性值
3在网页中显示所述标签。 所述显示模块包括通知子模块,用于根据所述特效类型和特效参数通知特效实 现模块实现所述特效;显示子模块,用于显示所述特效实现模块实现的所述特效。
在本发明实施例中,通过标签携带特效的相关信息,在特效实现过程中不需对标 签进行更改,只需要在特效实现完成后再更新标签,使得特效可以快速的实现;同时采用单 独特效实现模块执行特效,提高了网页中特效的执行效率。


为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现 有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本 发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可 以根据这些附图获得其他的附图。
图1是本发明实施例中的网页特效实现方法的一个具体流程示意图;
图2是本发明实施例中的网页特效实现方法的另一个具体流程示意图;
图3是本发明系统实施例中的三层结构的示意图;
图4是本发明系统实施例中的三层之间的交互关系和执行流程;
图5是本发明系统实施例中浏览器的一种组成示意图。
具体实施例方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完 整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于 本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他 实施例,都属于本发明保护的范围。 本发明实施例中的技术方案主要是利用了浏览器支持的标签功能,来实现特效的 快速实现。对了更好的理解本发明,先介绍一下本发明实施例中的浏览器和网页的一些基 本特性 1.浏览器支持各种标签,支持这些标签所具有的标准属性。如支持div标签的id
属性(标签的唯一标识)、支持align属性(标签的位置类型左对齐、右对齐、居中等)等。 2.当浏览器的用户通过浏览器打开网页或者显示网页时,浏览器会解析网页中这
些标签,根据标签的属性值来决定页面的排版和显示。 基于上述的基本特性,本发明实施例的实现原理是 1)在浏览器支持标签的标准属性外,额外扩展标签的一个私有属性(以下的实施 例中称之为特效属性)。如给div标签扩展一个私有属性effect。 2)特效实现模块通过JavaScript扩展实现一套特效。该特效包括移动特效(从
A点慢慢移动到B点)、透明度特效(从不透明慢慢变化到半透明)等等。其中,特效实现
模块涉及两个部分共同完成特效这个工作。 一是JavaScript扩展,来标识和通知浏览器某
标签是额外扩展标签;二是浏览器可以依赖的别的模块来具体实现特效。 3)当打开或者显示网页时,浏览器解析网页中的标签时,发现div标签有一个特
殊的effect属性,就知道该标签是一个特殊的标签,然后根据该标签设置的特效类型让特效实现模块去执行特效,这时浏览器不对该标签进行管理。当特效执行完毕后,浏览器最后 刷新一个该标签的结束位置即可。 这样,浏览器中的标签既实现了特效的执行过程,浏览器又只需对标签进行了一 次刷新(最后一次),大大简化了现有技术中的多次刷新过程。
以下基于上述原理详细描述本发明的各个具体实施例。 如图1所示,为本发明实施例中的网页特效实现方法的一个具体流程示意图,该 方法包括 101、获取网页标签,并判断所述标签中是否包括特效属性。该标签可以是行内元 素,也可以是块级元素。如可以是块级元素div,其id为ID,该元素可能包含图片、文字或 者其他信息。 102、若判断结果为是,则获取所述标签中设置的特效类型和特效参数。根据预定 的设置,可以是当步骤101判断为是时,即可默认为标签中设置有合法的特效类型和参数, 则此时可直接获取设置的特效类型和参数。 也可以是进一步判断是否有且有合法的特效类型和参数,则此时,本步包括判断
所述标签中是否设置了特效类型和特效参数;若判断结果为是,则解析设置的所述特效类
型和特效参数是否合法;若解析结果为是,则获取所述特效类型和特效参数。 103、根据所述特效类型和特效参数显示所述特效。其中,在显示特效时,特效的实
际实现可由其他的软件或硬件实现,如通过特效实现模块。则本步具体可包括根据所述特
效类型和特效参数通知特效实现模块实现所述特效;显示所述特效实现模块实现的所述特
效。进一步的,可通过其他软件或硬件实现该特效实现模块的特效执行。 104、在所述特效显示完后,更新所述标签。本步具体可以包括获取所述特效属性
的特效属性值,根据所述特效属性值更新所述标签的标准属性值;根据所述标准属性值在
网页中显示所述标签。
如图2所示,为对上述实施例的进一步详细说明。在本例中,包括
201、浏览器打开一个网页或者显示网页。
202 、浏览器对网页中的标签进行解析。 203、浏览器解析标签后,检查标签中是否设置了特殊属性(或称特效属性),若没 有设置则转208,否则执行下一步。 204、浏览器检查标签中是否设置了特效类型和参数,若没有则转208,否则执行下
__Lt少。 205、浏览器解析特效类型和参数。 206、验证特效类型和参数是否合法,若为非法则转208,否则执行下一步。
207、浏览器将特效类型和参数通知给特效实现模块执行特效,特效实现模块执行 特效并通过浏览器在网页上显示该特效,特效实现模块在特效执行完毕后,通知浏览器,浏 览器根据特殊属性的特殊属性值更新标签的标准属性值。 其中,特效实现模块执行特效时,需先接到需要执行特效的任务,特效类型,特效 参数等信息时,然后再开始执行特效了。例如移动特效,从A(IO,IO)的位置到B(200,10) 的位置,执行10次,每次间隔10毫秒。特效实现模块获得这些信息后开始执行特效起始 点在A(10, 10),等10毫秒,然后到了 C点(29, 10),再等10毫秒,到了 D点(48, 10)......,
5共执行了 IO次,就实现了从A移动到B的移动特效。用户看到了一个图片移动的过程。
208、浏览器根据标签的标准属性显示标签。 同时,在通过浏览器实现上述方案时,可采用如图3所示的三层结构实现。其中, 网页特效显示层和浏览器特效控制层在浏览器一方实现,而具体特效实现层则可通过特效 实现模块来实现。 其中,网页特效显示层进行正常的网页布局和排版;设置执行特效的标签和该特 效属性,如特效类型,特效参数等;显示特效的执行过程。 浏览器特效控制层解析需要执行特效的标签和特效属性;通知具体特效实现层去 执行特效;具体特效实现层特效执行完后通知浏览器特效控制层,浏览器特效控制层获知 后更新标签属性。 具体特效实现层得到执行特效的命令后开始执行特效;执行完后通知浏览器。
根据上述分工,图4显示了这三层之间的交互关系和执行流程。该流程包括
401、获取网页,网页中可能包含多个标签。
402、检测网页中的标签是否设置了特效属性。 403、解析设置了特效属性的标签,获得标签中的特效类型和参数。 404、通知开始执行特效。 405、执行特效。 406、网页中显示特效的执行过程。 407、特效执行完毕,通知浏览器。 408、更新标签的属性。 这样,网页特效显示层保证了页面的正常显示和展现特效;浏览器特效控制层保 证了解析到标签的特效属性,通知执行特效和更新标签的属性。具体特效实现层保证了特 效的正常执行。在本例中,该浏览器控制层既可以支持普通标签的正常显示,也可以支持包 含特效属性的标签的特效显示。 相应与上述流程,本发明实施例还提供了一种浏览器,如图5所示,其包括属性 获取模块51,用于获取网页标签,并判断所述标签中是否包括特效属性;参数获取模块52, 用于当属性获取模块的判断结果为是时,获取所述标签中设置的特效类型和特效参数;显 示模块53,用于根据所述特效类型和特效参数显示所述特效;更新模块54,用于在所述特 效显示完后,更新所述标签。 其中,显示模块可包括通知子模块,用于根据所述特效类型和特效参数通知特效
实现模块实现所述特效;显示子模块,用于显示所述特效实现模块实现的所述特效。 更新模块可包括值获取子模块,用于获取所述特效属性的特效属性值,根据所述
特效属性值更新所述标签的标准属性值;显示子模块,用于根据所述标准属性值在网页中
显示所述标签。 参数获取模块可包括判断子模块,用于判断所述标签中是否设置了特效类型和 特效参数;解析子模块,用于当判断子模块的判断结果为是时,解析设置的所述特效类型和 特效参数是否合法;获取子模块,用于当解析结果为是时,则获取所述特效类型和特效参 数。 在上述浏览器的各实施例中,各名词及涉及的方法可参考前述的方法实施例,此处不做赘述。 通过上述对各实施例的描述可知,通过标签携带特效的相关信息,在特效实现过 程中不需对标签进行更改,只需要在特效实现完成后再更新标签,节省了浏览器根据DOM 操作标签引起的刷新和排版,同时节省了网页中实现标签移动的代码量和逻辑控制,减少 了浏览器的解析时间;同时通过其他语言或者硬件的加速功能实现特效实现模块的高效, 提高了网页中特效的执行效率。即是说,既节省了特效的中间执行时间,又保留了浏览器对 标签元素的正常刷新流程。 通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到各实施方式可 借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件。基于这样的理解,上 述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该 计算机软件产品可以存储在计算机可读存储介质中,如ROM/RAM、磁碟、光盘等,包括若干指 令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行各个实施 例或者实施例的某些部分所述的方法。 以上所述的实施方式,并不构成对该技术方案保护范围的限定。任何在上述实施 方式的精神和原则之内所作的修改、等同替换和改进等,均应包含在该技术方案的保护范 围之内。
权利要求
一种网页特效实现方法,其特征在于,所述方法包括获取网页标签,并判断所述标签中是否包括特效属性;若判断结果为是,则获取所述标签中设置的特效类型和特效参数;根据所述特效类型和特效参数显示所述特效;在所述特效显示完后,更新所述标签。
2. 如权利要求1所述的方法,其特征在于,所述根据所述特效类型和特效参数显示所 述特效包括根据所述特效类型和特效参数通知特效实现模块实现所述特效; 显示所述特效实现模块实现的所述特效。
3. 如权利要求2所述的方法,其特征在于,所述更新所述标签包括 获取所述特效属性的特效属性值,根据所述特效属性值更新所述标签的标准属性值; 根据所述标准属性值在网页中显示所述标签。
4. 如权利要求3所述的方法,其特征在于,所述获取所述标签中设置的特效类型和特 效参数包括判断所述标签中是否设置了特效类型和特效参数; 若判断结果为是,则解析设置的所述特效类型和特效参数是否合法; 若解析结果为是,则获取所述特效类型和特效参数。
5. —种浏览器,其特征在于,所述浏览器包括属性获取模块,用于获取网页标签,并判断所述标签中是否包括特效属性; 参数获取模块,用于当属性获取模块的判断结果为是时,获取所述标签中设置的特效 类型和特效参数;显示模块,用于根据所述特效类型和特效参数显示所述特效; 更新模块,用于在所述特效显示完后,更新所述标签。
6. 如权利要求5所述的浏览器,其特征在于,所述显示模块包括 通知子模块,用于根据所述特效类型和特效参数通知特效实现模块实现所述特效; 显示子模块,用于显示所述特效实现模块实现的所述特效。
7. 如权利要求6所述的浏览器,其特征在于,所述更新模块包括值获取子模块,用于获取所述特效属性的特效属性值,根据所述特效属性值更新所述 标签的标准属性值;显示子模块,用于根据所述标准属性值在网页中显示所述标签。
8. 如权利要求7所述的浏览器,其特征在于,所述参数获取模块包括 判断子模块,用于判断所述标签中是否设置了特效类型和特效参数; 解析子模块,用于当判断子模块的判断结果为是时,解析设置的所述特效类型和特效参数是否合法;获取子模块,用于当解析结果为是时,则获取所述特效类型和特效参数。
全文摘要
本发明公开了一种网页特效实现方法和浏览器,该方法包括获取网页标签,并判断所述标签中是否包括特效属性;若判断结果为是,则获取所述标签中设置的特效类型和特效参数;根据所述特效类型和特效参数显示所述特效;在所述特效显示完后,更新所述标签。本发明实施例既节省了特效的中间执行时间,又保留了浏览器对标签元素的正常刷新流程。
文档编号G06F17/30GK101706785SQ20091010974
公开日2010年5月12日 申请日期2009年11月19日 优先权日2009年11月19日
发明者刘慧 申请人:深圳市同洲电子股份有限公司
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1