[发明专利]在网络浏览器上实现图片渐进渐出效果的方法和装置有效
申请号: | 201110121358.6 | 申请日: | 2011-05-11 |
公开(公告)号: | CN102779129A | 公开(公告)日: | 2012-11-14 |
发明(设计)人: | 唐爽 | 申请(专利权)人: | 腾讯科技(深圳)有限公司 |
主分类号: | G06F17/30 | 分类号: | G06F17/30 |
代理公司: | 广州华进联合专利商标代理有限公司 44224 | 代理人: | 何平;曾旻辉 |
地址: | 518044 广东省深圳*** | 国省代码: | 广东;44 |
权利要求书: | 查看更多 | 说明书: | 查看更多 |
摘要: | |||
搜索关键词: | 网络 浏览器 实现 图片 渐进 效果 方法 装置 | ||
【技术领域】
本发明涉及网络技术领域,尤其涉及一种在网络浏览器上实现图片渐进渐出效果的方法和装置。
【背景技术】
随着网络技术的发展,越来越多的浏览器可以实现图片渐进渐出效果,使得图片显示不会显得很突然。例如,传统的Internet Explorer浏览器可以通过自带的滤镜功能来实现图片渐进渐出效果。传统的支持在多类浏览器上实现图片渐进渐出的方法主要通过直接改变图片的透明度属性来实现。然而这种方法通常会导致图片发生损坏,例如,当图片尺寸大于一定宽度时,Internet Explore浏览器会导致图片显示不完整,出现局部的破损或在图片上出现小白点等,从而影响了图片显示效果。
【发明内容】
基于此,有必要提供一种不会对图片造成损坏的在网络浏览器上实现图片渐进渐出效果的方法。
一种在网络浏览器上实现图片渐进渐出效果的方法,包括以下步骤:
在图片显示区域上方设置遮罩层;
加载当前需显示的图片,将所述图片设置为可见;
按照设定的时间间隔调整所述遮罩层的透明度。
优选的,在所述按照设定的时间间隔调整所述遮罩层的透明度的步骤之后还包括:
判断是否还有下一张需显示的图片,若是,则
隐藏所述当前需显示的图片;
加载所述下一张需显示的图片,将所述下一张需显示的图片设置为可见;
按照设定的时间间隔调整所述遮罩层的透明度。
优选的,所述按照设定的时间间隔调整所述遮罩层的透明度的步骤为:
按照设定的时间间隔以预设数值为单位降低或增加所述遮罩层的透明度。
优选的,所述遮罩层设置在所述图片显示区域的正上方,并与所述图片显示区域大小一致。
此外,还有必要提供一种不会对图片造成损坏的在网络浏览器上实现图片渐进渐出效果的装置。
一种在网络浏览器上实现图片渐进渐出效果的装置,,包括:
设置模块,用于在图片显示区域上方设置遮罩层;
加载模块,用于加载当前需显示的图片,并将所述图片设置为可见;
调整模块,用于按照设定的时间间隔调整所述遮罩层的透明度。
优选的,还包括:
判断模块,用于判断是否还有下一张需显示的图片;
所述调整模块还用于当还有下一张需显示的图片时,隐藏所述当前需显示的图片;
所述加载模块还用于当还有下一张需显示的图片时,加载所述下一张需显示的图片,并将所述下一张需显示的图片设置为可见,以及通知所述调整模块按照设定的时间间隔调整所述遮罩层的透明度。
优选的,所述调整模块用于按照设定的时间间隔以预设数值为单位降低或增加所述遮罩层的透明度。
优选的,所述设置模块用于在所述图片显示区域的正上方设置遮罩层,所述遮罩层与所述图片显示区域大小一致。
上述在网络浏览器上实现图片渐进渐出效果的方法和装置,通过在图片显示区域上方设置遮罩层,显示图片时图片直接设置为可见,通过调整遮罩层的透明度来实现图片渐进渐出效果,不需要调整图片的透明度属性,因此不会损坏图片,改善了图片的显示效果。
【附图说明】
图1为一个实施例中在网络浏览器上实现图片渐进渐出效果的方法的流程图;
图2为一个实施例中设置遮罩层的示意图;
图3为另一个实施例中在网络浏览器上实现图片渐进渐出效果的方法的流程图;
图4为一个实施例中在网络浏览器上实现图片渐进渐出效果的装置的结构示意图;
图5为另一个实施例中在网络浏览器上实现图片渐进渐出效果的装置的结构示意图。
【具体实施方式】
如图1所示,在一个实施例中,一种在网络浏览器上实现图片渐进渐出效果的方法,包括以下步骤:
步骤S102,在图片显示区域上方设置遮罩层。
如图2所示,遮罩层是垂直于显示图片的显示器坐标方向,在图片显示区域上方,以指定颜色(通常为黑色或者灰色)为背景的网页容器元素。优选的,遮罩层设置在图片显示区域的正上方,并且与图片显示区域的大小一致。这样,调整遮罩层的透明度时,图片显示的透明度也会相应变化,设置遮罩层与图片显示区域大小一致,可以避免调整遮罩层的透明度时,不会影响到图片显示区域之外的网页元素。
步骤S104,加载当前需显示的图片,将该图片设置为可见。
将当前需显示的图片加载到图片显示区域,并将图片设置为可见。
该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于腾讯科技(深圳)有限公司,未经腾讯科技(深圳)有限公司许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服】
本文链接:http://www.vipzhuanli.com/pat/books/201110121358.6/2.html,转载请声明来源钻瓜专利网。