CN102779129A - 在网络浏览器上实现图片渐进渐出效果的方法和装置 - Google Patents
在网络浏览器上实现图片渐进渐出效果的方法和装置 Download PDFInfo
- Publication number
- CN102779129A CN102779129A CN2011101213586A CN201110121358A CN102779129A CN 102779129 A CN102779129 A CN 102779129A CN 2011101213586 A CN2011101213586 A CN 2011101213586A CN 201110121358 A CN201110121358 A CN 201110121358A CN 102779129 A CN102779129 A CN 102779129A
- Authority
- CN
- China
- Prior art keywords
- picture
- mask layer
- transparency
- web browser
- out effect
- 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.)
- Granted
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
- Controls And Circuits For Display Device (AREA)
- Information Transfer Between Computers (AREA)
Abstract
一种在网络浏览器上实现图片渐进渐出效果的方法,包括以下步骤:在图片显示区域上方设置遮罩层;加载当前需显示的图片,将所述图片设置为可见;按照设定的时间间隔调整所述遮罩层的透明度。该方法通过调整遮罩层的透明度实现图片的渐进渐出效果,不会对图片造成损坏,有效改善了图片显示效果。此外,还提供了一种在网络浏览器上实现图片渐进渐出效果的装置。
Description
【技术领域】
本发明涉及网络技术领域,尤其涉及一种在网络浏览器上实现图片渐进渐出效果的方法和装置。
【背景技术】
随着网络技术的发展,越来越多的浏览器可以实现图片渐进渐出效果,使得图片显示不会显得很突然。例如,传统的Internet Explorer浏览器可以通过自带的滤镜功能来实现图片渐进渐出效果。传统的支持在多类浏览器上实现图片渐进渐出的方法主要通过直接改变图片的透明度属性来实现。然而这种方法通常会导致图片发生损坏,例如,当图片尺寸大于一定宽度时,Internet Explore浏览器会导致图片显示不完整,出现局部的破损或在图片上出现小白点等,从而影响了图片显示效果。
【发明内容】
基于此,有必要提供一种不会对图片造成损坏的在网络浏览器上实现图片渐进渐出效果的方法。
一种在网络浏览器上实现图片渐进渐出效果的方法,包括以下步骤:
在图片显示区域上方设置遮罩层;
加载当前需显示的图片,将所述图片设置为可见;
按照设定的时间间隔调整所述遮罩层的透明度。
优选的,在所述按照设定的时间间隔调整所述遮罩层的透明度的步骤之后还包括:
判断是否还有下一张需显示的图片,若是,则
隐藏所述当前需显示的图片;
加载所述下一张需显示的图片,将所述下一张需显示的图片设置为可见;
按照设定的时间间隔调整所述遮罩层的透明度。
优选的,所述按照设定的时间间隔调整所述遮罩层的透明度的步骤为:
按照设定的时间间隔以预设数值为单位降低或增加所述遮罩层的透明度。
优选的,所述遮罩层设置在所述图片显示区域的正上方,并与所述图片显示区域大小一致。
此外,还有必要提供一种不会对图片造成损坏的在网络浏览器上实现图片渐进渐出效果的装置。
一种在网络浏览器上实现图片渐进渐出效果的装置,,包括:
设置模块,用于在图片显示区域上方设置遮罩层;
加载模块,用于加载当前需显示的图片,并将所述图片设置为可见;
调整模块,用于按照设定的时间间隔调整所述遮罩层的透明度。
优选的,还包括:
判断模块,用于判断是否还有下一张需显示的图片;
所述调整模块还用于当还有下一张需显示的图片时,隐藏所述当前需显示的图片;
所述加载模块还用于当还有下一张需显示的图片时,加载所述下一张需显示的图片,并将所述下一张需显示的图片设置为可见,以及通知所述调整模块按照设定的时间间隔调整所述遮罩层的透明度。
优选的,所述调整模块用于按照设定的时间间隔以预设数值为单位降低或增加所述遮罩层的透明度。
优选的,所述设置模块用于在所述图片显示区域的正上方设置遮罩层,所述遮罩层与所述图片显示区域大小一致。
上述在网络浏览器上实现图片渐进渐出效果的方法和装置,通过在图片显示区域上方设置遮罩层,显示图片时图片直接设置为可见,通过调整遮罩层的透明度来实现图片渐进渐出效果,不需要调整图片的透明度属性,因此不会损坏图片,改善了图片的显示效果。
【附图说明】
图1为一个实施例中在网络浏览器上实现图片渐进渐出效果的方法的流程图;
图2为一个实施例中设置遮罩层的示意图;
图3为另一个实施例中在网络浏览器上实现图片渐进渐出效果的方法的流程图;
图4为一个实施例中在网络浏览器上实现图片渐进渐出效果的装置的结构示意图;
图5为另一个实施例中在网络浏览器上实现图片渐进渐出效果的装置的结构示意图。
【具体实施方式】
如图1所示,在一个实施例中,一种在网络浏览器上实现图片渐进渐出效果的方法,包括以下步骤:
步骤S102,在图片显示区域上方设置遮罩层。
如图2所示,遮罩层是垂直于显示图片的显示器坐标方向,在图片显示区域上方,以指定颜色(通常为黑色或者灰色)为背景的网页容器元素。优选的,遮罩层设置在图片显示区域的正上方,并且与图片显示区域的大小一致。这样,调整遮罩层的透明度时,图片显示的透明度也会相应变化,设置遮罩层与图片显示区域大小一致,可以避免调整遮罩层的透明度时,不会影响到图片显示区域之外的网页元素。
步骤S104,加载当前需显示的图片,将该图片设置为可见。
将当前需显示的图片加载到图片显示区域,并将图片设置为可见。
步骤S106,按照设定的时间间隔调整遮罩层的透明度。
调整遮罩层的透明度时,图片显示的透明度会随着遮罩层的透明度变化而变化,从而实现图片渐进渐出效果。由于不需要直接调整图片的透明度属性,因此不会对图片造成损坏,改善了图片显示效果。
如图3所示,在另一个实施例中,一种在网络浏览器上实现图片渐进渐出效果的方法,包括以下步骤:
步骤S202,在图片显示区域上方设置遮罩层。
如图2所示,在一个优选的实施例中,遮罩层设置在图片显示区域的正上方,并且与图片显示区域的大小一致。
步骤S204,加载当前需显示的图片,将该图片设置为可见。
打开网页时,通常在图片显示区域需要显示多张图片,该实施例中,仅加载当前需显示的图片,而其他接着要显示的图片可以在当前需显示的图片显示完后再去加载。这样,按照需要加载图片,在网页打开时能够减少网络数据传输,缩短网页打开时间。此外,一些网页打开后在较短的时间内就被关闭,若将所有需要在图片显示区域显示的图片都加载下来,往往一些加载下来的图片并没有使用到,因此,按照需要加载图片,也可以减少不必要的网络数据传输。
加载当前需显示的图片,是将图片输出到网页指定区域(即图片显示区域)对应的HTML(Hyper Text Mark-up Language,超文本标记语言)代码中。在加载完当前需显示的图片时,将该图片设置为可见。
在其他实施方式中,也可以加载需要在图片显示区域显示的多张图片,若加载的是多张图片,则将当前需显示的图片设置为可见,将其它图片进行隐藏。
步骤S206,按照设定的时间间隔调整遮罩层的透明度。
在步骤S206中,按照设定的时间间隔以预设数值为单位降低或增加遮罩层的透明度。例如,每2秒降低遮罩层10%的透明度。当遮罩层的透明度降低时,则图片显示的透明度增加,即图片会逐渐的显示出来。
步骤S208,判断是否还有下一张需显示的图片,若是,则进入步骤S210,否则结束。若还有下一张需显示的图片,则继续显示。
步骤S210,隐藏当前需显示的图片。
若还需要显示下一张需显示的图片,则将当前需显示的图片隐藏。这样,若以后还需要显示当前需显示的图片时,可以将该当前需显示的图片直接设置为可见,而不需要重新加载这张图片,因此既能减少网络数据传输,又提高了处理效率。
步骤S212,加载下一张需显示的图片,将下一张需显示的图片设置为可见。
步骤S214,按照设定的时间间隔调整所述遮罩层的透明度,返回步骤S208。
如上所述,对于每一张需显示的图片,通过调整遮罩层的透明度即可实现该张图片的渐进渐出效果,而不需要直接调整每张图片的透明度属性,因此不会对图片造成损坏。调整完遮罩层的透明度后,返回到步骤S208继续判断是否还有下一张需显示的图片,若所有的图片已经显示完或网页关闭时,则流程结束。
在另一个实施例中,显示完所有的图片后,判断是否需要循环显示图片,若是,则继续从第一张图片开始显示,即隐藏其他图片(将其他图片设置为不可见),仅将第一张图片设置为可见。由于图片已经加载完,因此不需要重新加载图片,减少了网络数据传输。当需要循环显示图片时,仅需要按照图片的显示顺序将当前需要显示的图片设置为可见,将其他图片设置为不可见,并在将当前需显示的图片设置为可见后,通过调整遮罩层的透明度来实现图片的渐进渐出效果。
如图4所示,在一个实施例中,一种在网络浏览器上实现图片渐进渐出效果的装置,包括设置模块102、加载模块104和调整模块106,其中:
设置模块102用于在图片显示区域上方设置遮罩层。
如图2所示,遮罩层是垂直于显示图片的显示器坐标方向,在图片显示区域上方,以指定颜色(通常为黑色或者灰色)为背景的网页容器元素。优选的,设置模块102将遮罩层设置在图片显示区域的正上方,并且与图片显示区域的大小一致。这样,调整遮罩层的透明度时,图片显示的透明度也会相应变化,设置遮罩层与图片显示区域大小一致,可以避免调整遮罩层的透明度时,不会影响到图片显示区域之外的网页元素。
加载模块104用于加载当前需显示的图片,并将该当前需显示的图片设置为可见。
调整模块106用于按照设定的时间间隔调整遮罩层的透明度。
由于当前需显示的图片设置为可见,调整模块106在调整遮罩层的透明度时,图片显示的透明度会随着遮罩层的透明度变化而变化,从而实现图片渐进渐出效果。由于不需要直接调整图片的透明度属性,因此不会对图片造成损坏,改善了图片显示效果。
如图5所示,在另一个实施例中,一种在网络浏览器上实现图片渐进渐出效果的装置,除了包括上述设置模块102、加载模块104和调整模块106外,还包括判断模块108,其中:
判断模块108用于判断是否还有下一张需显示的图片。
该实施例中,调整模块106还用于当还有下一张需显示的图片时,隐藏所述当前需显示的图片;加载模块104还用于当还有下一张需显示的图片时,加载所述下一张需显示的图片,并将所述下一张需显示的图片设置为可见,以及通知调整模块106按照设定的时间间隔调整遮罩层的透明度。
加载模块104在还有下一张需显示图片时,继续加载下一张需显示的图片。也就是说,加载模块104仅加载当前需要显示的图片,而其他接着要显示的图片可以在当前需显示的图片显示完后再去加载。这样按照需要加载图片,在网页打开时能够减少网络数据传输,缩短网页打开时间。此外,一些网页打开后可能在较短的时间内就被关闭,若将所有需要在图片显示区域显示的图片都加载下来,往往一些加载下来的图片并没有使用到,因此,按照需要加载图片,也可以减少不必要的网络数据传输。
加载模块104加载当前需显示的图片,是将图片输出到网页指定区域(即图片显示区域)对应的HTML(Hyper Text Mark-up Language,超文本标记语言)代码中。在加载完当前需显示的图片时,将该图片设置为可见。
该实施例中,若还有下一张需显示的图片,则调整模块106将当前需显示的图片隐藏,这样,若以后还需要显示当前需显示的图片时,可以将该当前需显示的图片直接设置为可见,而不需要重新加载这张图片,因此既能减少网络数据传输,又提高了处理效率。
对于每一张需显示的图片,通过调整遮罩层的透明度即可实现该张图片的渐进渐出效果,而不需要直接调整每张图片的透明度属性,因此不会对图片造成损坏。调整完遮罩层的透明度从而实现了当前图片的渐进渐出效果后,判断模块108会继续判断是否还有下一张需显示的图片,直到所有的图片已显示完或网页关闭。
在另一个实施例中,当所有图片都显示完后,判断模块108可进一步判断是否还需要循环显示图片,若是,则调整模块106隐藏当前显示的图片,将第一张图片设置为可见,然后调整模块106继续调整遮罩层的透明度来实现图片的渐进渐出效果。也就是说,当需要循环显示图片时,仅需要按照图片的显示顺序将当前需要显示的图片设置为可见,将其他图片设置为不可见,并在将当前需显示的图片设置为可见后,通过调整遮罩层的透明度来实现图片的渐进渐出效果。由于需要显示的所有图片都已经加载完,循环显示图片时不需要重新加载图片,减少了网络数据传输。
应该说明的是,上述在网络浏览器实现图片渐进渐出效果的方法和***并不局限于网络浏览器的类型,在多类网络浏览器上都可以实现图片渐进渐出效果。
以上所述实施例仅表达了本发明的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本发明专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本发明构思的前提下,还可以做出若干变形和改进,这些都属于本发明的保护范围。因此,本发明专利的保护范围应以所附权利要求为准。
Claims (8)
1.一种在网络浏览器上实现图片渐进渐出效果的方法,包括以下步骤:
在图片显示区域上方设置遮罩层;
加载当前需显示的图片,将所述图片设置为可见;
按照设定的时间间隔调整所述遮罩层的透明度。
2.根据权利要求1所述的在网络浏览器上实现图片渐进渐出效果的方法,其特征在于,在所述按照设定的时间间隔调整所述遮罩层的透明度的步骤之后还包括:
判断是否还有下一张需显示的图片,若是,则
隐藏所述当前需显示的图片;
加载所述下一张需显示的图片,将所述下一张需显示的图片设置为可见;
按照设定的时间间隔调整所述遮罩层的透明度。
3.根据权利要求1所述的在网络浏览器上实现图片渐进渐出效果的方法,其特征在于,所述按照设定的时间间隔调整所述遮罩层的透明度的步骤为:
按照设定的时间间隔以预设数值为单位降低或增加所述遮罩层的透明度。
4.根据权利要求1至3中任意一项所述的在网络浏览器上实现图片渐进渐出效果的方法,其特征在于,所述遮罩层设置在所述图片显示区域的正上方,并与所述图片显示区域大小一致。
5.一种在网络浏览器上实现图片渐进渐出效果的装置,其特征在于,包括:
设置模块,用于在图片显示区域上方设置遮罩层;
加载模块,用于加载当前需显示的图片,并将所述图片设置为可见;
调整模块,用于按照设定的时间间隔调整所述遮罩层的透明度。
6.一种根据权利要求5所述的在网络浏览器上实现图片渐进渐出效果的装置,其特征在于,还包括:
判断模块,用于判断是否还有下一张需显示的图片;
所述调整模块还用于当还有下一张需显示的图片时,隐藏所述当前需显示的图片;
所述加载模块还用于当还有下一张需显示的图片时,加载所述下一张需显示的图片,并将所述下一张需显示的图片设置为可见,以及通知所述调整模块按照设定的时间间隔调整所述遮罩层的透明度。
7.根据权利要求5所述的在网络浏览器上实现图片渐进渐出效果的装置,其特征在于,所述调整模块用于按照设定的时间间隔以预设数值为单位降低或增加所述遮罩层的透明度。
8.根据权利要求6至7中任意一项所述的网络浏览器上实现图片渐进渐出效果的装置,其特征在于,所述设置模块用于在所述图片显示区域的正上方设置遮罩层,所述遮罩层与所述图片显示区域大小一致。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201110121358.6A CN102779129B (zh) | 2011-05-11 | 2011-05-11 | 在网络浏览器上实现图片渐进渐出效果的方法和装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201110121358.6A CN102779129B (zh) | 2011-05-11 | 2011-05-11 | 在网络浏览器上实现图片渐进渐出效果的方法和装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN102779129A true CN102779129A (zh) | 2012-11-14 |
CN102779129B CN102779129B (zh) | 2016-08-03 |
Family
ID=47124046
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201110121358.6A Active CN102779129B (zh) | 2011-05-11 | 2011-05-11 | 在网络浏览器上实现图片渐进渐出效果的方法和装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN102779129B (zh) |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2014082541A1 (en) * | 2012-11-29 | 2014-06-05 | Tencent Technology (Shenzhen) Company Limited | Method for switching pictures of picture galleries and browser |
CN105893048A (zh) * | 2016-03-31 | 2016-08-24 | 北京金山安全软件有限公司 | 浏览器主题更换方法、装置及电子设备 |
CN106528135A (zh) * | 2016-10-27 | 2017-03-22 | 中企动力科技股份有限公司 | 一种网页中目标组件的确定方法及装置 |
CN108897881A (zh) * | 2018-07-05 | 2018-11-27 | 腾讯科技(深圳)有限公司 | 交互式图像显示方法、装置、设备和可读存储介质 |
CN110458921A (zh) * | 2019-08-05 | 2019-11-15 | 腾讯科技(深圳)有限公司 | 一种图像处理方法、装置、终端以及存储介质 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US6429881B1 (en) * | 1997-12-03 | 2002-08-06 | Microsoft Corporation | Method and system for transitioning graphic elements of a network interface description document |
WO2007040413A1 (en) * | 2005-10-05 | 2007-04-12 | Pure Depth Limited | Method of manipulating visibility of images on a volumetric display |
CN101536078A (zh) * | 2006-09-25 | 2009-09-16 | 奥多比公司 | 改进图像蒙板 |
CN101588411A (zh) * | 2009-06-09 | 2009-11-25 | 深圳市五巨科技有限公司 | 移动终端滚动显示自动更新消息的方法和装置 |
-
2011
- 2011-05-11 CN CN201110121358.6A patent/CN102779129B/zh active Active
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US6429881B1 (en) * | 1997-12-03 | 2002-08-06 | Microsoft Corporation | Method and system for transitioning graphic elements of a network interface description document |
WO2007040413A1 (en) * | 2005-10-05 | 2007-04-12 | Pure Depth Limited | Method of manipulating visibility of images on a volumetric display |
CN101536078A (zh) * | 2006-09-25 | 2009-09-16 | 奥多比公司 | 改进图像蒙板 |
CN101588411A (zh) * | 2009-06-09 | 2009-11-25 | 深圳市五巨科技有限公司 | 移动终端滚动显示自动更新消息的方法和装置 |
Non-Patent Citations (1)
Title |
---|
张晓艳: "《数字电视节目制作技巧-蒙板的应用》", 《电视字幕(特技与动画)》 * |
Cited By (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2014082541A1 (en) * | 2012-11-29 | 2014-06-05 | Tencent Technology (Shenzhen) Company Limited | Method for switching pictures of picture galleries and browser |
CN103853438A (zh) * | 2012-11-29 | 2014-06-11 | 腾讯科技(深圳)有限公司 | 图集图片切换方法及浏览器 |
CN103853438B (zh) * | 2012-11-29 | 2018-01-26 | 腾讯科技(深圳)有限公司 | 图集图片切换方法及浏览器 |
CN105893048A (zh) * | 2016-03-31 | 2016-08-24 | 北京金山安全软件有限公司 | 浏览器主题更换方法、装置及电子设备 |
CN106528135A (zh) * | 2016-10-27 | 2017-03-22 | 中企动力科技股份有限公司 | 一种网页中目标组件的确定方法及装置 |
CN108897881A (zh) * | 2018-07-05 | 2018-11-27 | 腾讯科技(深圳)有限公司 | 交互式图像显示方法、装置、设备和可读存储介质 |
CN108897881B (zh) * | 2018-07-05 | 2023-08-22 | 腾讯科技(深圳)有限公司 | 交互式图像显示方法、装置、设备和可读存储介质 |
CN110458921A (zh) * | 2019-08-05 | 2019-11-15 | 腾讯科技(深圳)有限公司 | 一种图像处理方法、装置、终端以及存储介质 |
CN110458921B (zh) * | 2019-08-05 | 2021-08-03 | 腾讯科技(深圳)有限公司 | 一种图像处理方法、装置、终端以及存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN102779129B (zh) | 2016-08-03 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN102779129A (zh) | 在网络浏览器上实现图片渐进渐出效果的方法和装置 | |
Choi et al. | Evaluating robustness of deep image super-resolution against adversarial attacks | |
CN102682093B (zh) | 一种移动浏览器网页分段加载方法及*** | |
CN104360882B (zh) | 一种浏览器中对网页中图片进行显示方法和装置 | |
CN103425794B (zh) | 基于双WebView的网页预览方法和装置 | |
US20160155411A1 (en) | Display control method and device for application program interface | |
CN102968474B (zh) | 移动通讯设备浏览网页显示方法 | |
CN105009057A (zh) | 使用高dpi屏幕的多窗口智能窗口放置 | |
CN102508861B (zh) | 一种网页色彩设置方法、网页浏览器和网页服务器 | |
CN104182430A (zh) | 文本信息中的图片显示方法及装置 | |
CN104123362A (zh) | 一种面向多终端设备的网页适应性布局方法 | |
CN105117232A (zh) | 用户界面文字图片生成方法及*** | |
CN107908793A (zh) | 网页弹窗的方法及*** | |
CN104252350B (zh) | 一种加载列表框中的图片的方法和装置 | |
CN105929951A (zh) | 一种屏幕显示方法及装置 | |
US20150331558A1 (en) | Method for switching pictures of picture galleries and browser | |
CN106981044A (zh) | 一种图像虚化方法及*** | |
CN103685963B (zh) | 图像显示处理方法及装置 | |
US20140359405A1 (en) | Method and device of displaying images in text information | |
CN103064677A (zh) | 一种web多文档子窗口的管理方法及装置 | |
CN111897532A (zh) | 页面元素监听方法、电子设备和介质 | |
CN107463307A (zh) | 文档显示方法和装置 | |
US20130031467A1 (en) | So-called hd-web method for high-definition and all-screen compatibile internet contents | |
CN205810348U (zh) | 一种拼接屏控制*** | |
CN105791524A (zh) | 一种调整页面字体的方法及装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
C14 | Grant of patent or utility model | ||
GR01 | Patent grant |