瀑布流式图片显示的方法和装置的制造方法

文档序号:9432296阅读:373来源:国知局
瀑布流式图片显示的方法和装置的制造方法
【技术领域】
[0001]本发明涉及浏览器技术领域,特别是涉及一种瀑布流式图片显示的方法和系统。
【背景技术】
[0002]瀑布流,又称瀑布流式布局。它是目前比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据并添加至当前尾部。用户只需要轻轻滑动一下鼠标滚轮,就会有大量的图片呈现在眼前。
[0003]瀑布流可以使用户以一眼扫过的快速阅读模式在短时间内获得更多的信息量,且其懒加载的模式又避免了用户点击鼠标进行翻页的操作。但是正是因为其一次性的呈现大量的图片信息,所以很难抓住用户对某一个应用图标或图片的注意,不能引导用户去关注特定的信息。

【发明内容】

[0004]基于此,有必要针对上述技术问题,提供一种能够使某些特定信息突出显示的瀑布流式图片显示的方法。
[0005]—种瀑布流式图片显示的方法,所述方法包括:将图片加载到页面可视区域中;获取所述页面可视区域中的图片的属性信息;获取具有预设的动画属性的目标图片;根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。
[0006]在其中一个实施例中,所述获取具有预设的动画属性的目标图片的步骤包括:实时检测页面可视区域内是否有具有动画属性的图片;若有,则将所述图片作为目标图片。
[0007]在其中一个实施例中,所述获取具有预设的动画属性的目标图片的步骤包括:每隔预设的时间间隔在页面可视区域内随机抽取一张图片;判断所述图片是否具有动画属性;若有,则将所述图片作为目标图片。
[0008]在其中一个实施例中,在所述根据所述动画属性对所述目标图片执行突出显示的动画效果的步骤之前,还包括:判断目标图片与页面可视区域边缘的距离是否大于预设长度;若所述目标图片与所述页面可视区域边缘的距离大于预设长度,则进入所述根据所述动画属性对所述目标图片执行相应的突出显示的动画效果的步骤。
[0009]在其中一个实施例中,所述动画属性为翻转属性或放大属性。
[0010]—种瀑布流式图片显示的装置,所述装置包括:加载模块,用于将图片加载到页面可视区域中;属性获取模块,用于获取所述页面可视区域中的图片的属性信息;图片获取模块,用于获取具有预设的动画属性的目标图片;动画执行模块,用于根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。
[0011]在其中一个实施例中,所述图片获取模块用于实时检测页面可视区域内是否有具有动画属性的图片,若有,则将所述图片作为目标图片。
[0012]在其中一个实施例中,所述图片获取模块每隔预设的时间间隔在页面可视区域内随机抽取一张图片;判断所述图片是否具有动画属性,若有,则将所述图片作为目标图片。
[0013]在其中一个实施例中,所述装置还包括:距离判断模块,用于判断目标图片与页面可视区域边缘的距离是否大于预设长度;若是,则通知所述动画执行模块根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。
[0014]在其中一个实施例中,所述动画属性为翻转属性或放大属性。
[0015]上述瀑布流式图片显示的方法和装置,通过将图片加载到页面可视区域中,获取所述页面可视区域中的图片的属性信息,获取具有预设的动画属性的目标图片,根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。通过让某些图片信息进行突出显示,可以引导用户去关注特定的信息。
【附图说明】
[0016]图1为一个实施例中瀑布流式图片显示方法的流程图;
[0017]图2为一个实施例中获取目标图片的方法流程图;
[0018]图3为另一个实施例中获取目标图片的方法流程图;
[0019]图4为另一个实施例中瀑布流式图片显示方法的流程图;
[0020]图5为一个实施例中瀑布流式图片显示装置的结构框图;
[0021]图6为另一个实施例中瀑布流式图片显示装置的结构框图。
【具体实施方式】
[0022]为了使本发明的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本发明进行进一步详细说明。应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。
[0023]如图1所示,在一个实施例中,提供了一种瀑布流式图片显示的方法,该方法包括:
[0024]步骤102,将图片加载到页面可视区域中。
[0025]具体的,图片可以是图画、照片、应用图标等以图的形式在网页上呈现的信息。页面可视区域是指当前可观看到的网页区域,也即是在终端屏幕上显示的区域。终端可以是智能手机、平板电脑、笔记本电脑等具有显示屏幕的电子设备。根据用户的浏览网页的请求,将图片加载到当前页面的可视区域供用户浏览观看。
[0026]步骤104,获取页面可视区域中的图片的属性信息。
[0027]具体的,图片的属性信息包括图片的大小、位置、像素等信息,也包括为某些图片预先特别设置的动画属性信息。
[0028]步骤106,获取具有预设的动画属性的目标图片。
[0029]在本实施例中,动画属性可以是翻转属性,也可以是放大属性或其他。为了突出显示某些图片的信息,提前为某些特定的图片设置动画属性,根据其动画属性,可以进行相应的动画显示(翻转或放大)。
[0030]步骤108,根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。
[0031]具体的,执行相应的突出显示动画效果的程序是写入图片显示方式数据包中的,不同的动画属性对应执行不同的动画效果,比如,若图片具有的是翻转属性,则对应的执行图片的翻转效果,其基于Camera算法用二维模拟三维,让图片能够看起来更立体更形象;若图片具有的是放大的属性,则对应的执行图片的放大效果。
[0032]在本实施例中,通过将图片加载到页面可视区域中,获取所述页面可视区域中的图片的属性信息,获取具有预设的动画属性的目标图片,根据所述动画属性对所述目标图片执行相应的突出显示的动画效果。通过让某些图片信息进行突出显示,可以引导用户去关注特定的信息。
[0033]如图2所示,在一个实施例中,获取具有预设的动画属性的目标图片的步骤包括:
[0034]步骤106a,实时检测页面可视区域内是否有具有动画属性的图片,若有,则进入步骤106b,若无,则结束。
[0035]在本实施例中,对网页可视区域内的图片进行实时检测,查找具有动画属性的图片。若查找到具有动画属性的图片,则将该图片作为目标图片。
[0036]步骤106b,将上述图片作为目标图片。
[0037]在本实施例中,将检测到的具有动画属性的图片作为目标图片,根据目标图片的动画属性执行相应
当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1