用于屏幕显示设备的图像展示方法及装置制造方法及图纸

技术编号:13793260 阅读:68 留言:0更新日期:2016-10-06 06:14
本申请公开了一种用于屏幕显示设备的图像展示方法,包括:获得待展示图像;选择在预先设定的容器中展示所述图像的方式;按照所选方式在所述容器中动态地展示所述图像的全部内容。本申请同时提供一种用于屏幕显示设备的图像展示装置。本申请提供的上述方法,采用了不同于现有技术的动态展示方式,巧妙地解决了信息展示完整性与空间占用率之间的矛盾,在不扩大容器尺寸的条件下,实现了容器尺寸与图像尺寸之间的适配,在有限的展示空间中展示了图像的完整内容。

【技术实现步骤摘要】

本申请涉及图像显示技术,具体涉及一种用于屏幕显示设备的图像展示方法。本申请同时涉及一种用于屏幕显示设备的图像展示装置。
技术介绍
随着计算机和互联网技术的发展,出现了众多的为用户提供各种信息及服务的网站,而网页(也称web页面)则是每个网站向用户展示、推荐信息、提供服务的主要方式。一个web页面通常包含多种资源,例如:文字、图片、超链接、表格、表单等。其中,由于文字、表格等所传递的信息是相对枯燥的,而图片通常颜色鲜艳、简洁明了,往往能够带给用户更为直观的感性认识,因此,图片已成为web页面中不可或缺的重要成员之一。在web页面中用于展示图片的元素,例如,DIV元素,也称为容器。通常在设计页面时会预先指定容器的大小,而在该容器中展示的图片可能是由第三方提供的,在浏览器加载页面的过程中,根据图片标签的src属性中的URL信息,从网络获取该图片资源。由此可见,由于图片通常是通过网络动态获取的,因此,图片尺寸可能与容器尺寸不匹配,而且经常会出现图片尺寸大于容器尺寸的情况,导致无法在容器的有限空间内完整展示图片,影响用户的浏览体验。目前解决上述问题的常用方法是:在设计网页时,尽可能为用于显示图片的容器设置较大的尺寸,即:设置较大的宽度值和高度值。这种方法在一定程度上可以解决上述问题,但是,依然存在以下缺陷:1)由于第三方提供的图片资源通常是不可控的,因此,不可避免还是会出现部分图片无法完整显示的问题;2)采用这种方式展示图片的完整信息,需要在web页面中占用大幅的展示空间,自然会减少页面展示的其他信息量,这将影响其他信息的展示效果。
技术实现思路
本申请实施例提供一种用于屏幕显示设备的图像展示方法,以解决现有的静态展示技术无法在有限的展示空间完整展示图像内容的问题。本申请实施例还提供一种用于屏幕显示设备的图像展示装置。本申请提供一种用于屏幕显示设备的图像展示方法,包括:获得待展示图像;选择在预先设定的容器中展示所述图像的方式;按照所选方式在所述容器中动态地展示所述图像的全部内容。可选的,所述方法包括:获取所述图像的宽度值和高度值;当所述图像的宽度值大于其高度值时,选择横向滑动的展示方式;当所述图像的宽度值不大于其高度值时,选择纵向滑动的展示方式。可选的,所述选择在预先设定的容器中展示所述图像的方式,还包括:获取所述容器的宽度值和高度值;当所述图像的宽度值大于其高度值时,还包括:将所述图像进行等比例缩放,使其高度值与所述容器的高度值相同;和/或,当所述图像的宽度值不大于其高度值时,还包括:将所述图像进行等比例缩放,使其宽度值与所述容器的宽度值相同。可选的,当所述图像的宽度值大于其高度值时,在执行所述将所述图像进行等比例缩放的步骤前,执行下述操作:判断所述图像的高度值是否大于所述容器的高度值;若是,执行所述将所述图像进行等比例缩放,使其高度值与所述容器的高度值相同的步骤。可选的,当所述图像的宽度值不大于其高度值时,在执行所述将所述图像进行等比例缩放的步骤前,执行下述操作:判断所述图像的宽度值是否大于所述容器的宽度值;若是,执行所述将所述图像进行等比例缩放,使其宽度值与所述容器的宽度值相同的步骤。可选的,所述按照所选方式在所述容器中动态地展示所述图像的全部内容,
采用如下方式实现:按照预先设定的方向,在所述容器中滑动显示所述图像的全部内容。可选的,当选择横向滑动的展示方式时,所述预先设定的方向包括:从左到右,或者从右到左;当选择纵向滑动的展示方式时,所述预先设定的方向包括:从上到下,或者从下到上。可选的,循环执行所述按照所选方式在所述容器中动态地展示所述图像的全部内容的步骤。可选的,所述容器为web页面中的、具有固定宽高属性值的DIV元素。可选的,所述按照所选方式在所述容器中动态地展示所述图像的全部内容采用如下方式实现:利用css的transition机制,通过调整所述图像在所述容器中的显示位置,在所述容器中动态地展示所述图像的全部内容。可选的,当检测到所述DIV元素出现在浏览器的可视区域内时,执行所述按照所选方式在所述容器中动态地展示所述图像的全部内容的步骤。可选的,在所述按照所选方式在所述容器中动态地展示所述图像的全部内容的步骤之后,执行下述操作:当检测到所述DIV元素不在浏览器可视区域时,停止所述动态展示过程。相应的,本申请还提供一种用于屏幕显示设备的图像展示装置,包括:图像获得单元,用于获得待展示图像;方式选择单元,用于选择在预先设定的容器中展示所述图像的方式;动态展示单元,用于按照所选方式在所述容器中动态地展示所述图像的全部内容。可选的,所述方式选择单元包括:图像参数获取子单元,用于获取所述图像的宽度值和高度值;图像参数判断子单元,用于判断所述图像的宽度值是否大于其高度值;横向滑动选择子单元,用于当所述图像参数判断子单元的输出为是时,选择横向滑动的展示方式;纵向滑动选择子单元,用于当所述图像参数判断子单元得输出为否时,选
择纵向滑动的展示方式。可选的,所述方式选择单元还包括:容器参数获取子单元,用于获取所述容器的宽度值和高度值;图像等高缩放子单元,用于当所述图像参数判断子单元的输出为是时,将所述图像进行等比例缩放,使其高度值与所述容器的高度值相同;和/或,图像等宽缩放子单元,用于当所述图像参数判断子单元的输出为否时,将所述图像进行等比例缩放,使其宽度值与所述容器的宽度值相同。可选的,所述方式选择单元还包括:第一缩放判断子单元,用于当所述图像参数判断子单元的输出为是时,判断所述图像的高度值是否大于所述容器的高度值,若是,触发所述图像等高缩放子单元。可选的,所述方式选择单元还包括:第二缩放判断子单元,用于当所述图像参数判断子单元的输出为否时,判断所述图像的宽度值是否大于所述容器的宽度值,若是,触发所述图像等宽缩放子单元。可选的,所述动态展示单元具体用于,按照预先设定的方向,在所述容器中滑动显示所述图像的全部内容。可选的,所述动态展示单元具体用于,循环地按照所选方式在所述容器中动态地展示所述图像的全部内容。可选的,所述动态展示单元所用的容器为,web页面中的、具有固定宽高属性值的DIV元素。可选的,所述动态展示单元具体用于,利用css的transition机制,通过调整所述图像在所述容器中的显示位置,在所述容器中动态地展示所述图像的全部内容。可选的,所述装置还包括:可视检测单元,用于检测所述DIV元素是否出现在浏览器的可视区域内,若是,触发所述动态展示单元。可选的,所述可视检测单元还用于,在触发所述动态展示单元工作后,若检测到所述DIV元素不在浏览器可视区域内,则停止所述动态展示单元的工作。与现有技术相比,本申请具有以下优点:本申请提供的用于屏幕显示设备的图像展示方法,首先获得待展示图像,选择在预先设定的容器中展示图像的方式,并按照所选方式在所述容器中动态地展示所述图像的全部内容。本申请提供的上述方法,采用了不同于现有技术的动态展示方式,巧妙地解决了信息展示完整性与空间占用率之间的矛盾,在不扩大容器尺寸的条件下,实现了容器尺寸与图像尺寸之间的适配,在有限的展示空间中展示了图像的完整内容。附图说明图1是本申请的一种用于屏幕显示设备的图像展示方法的实施例的流程图;图2是本实施例提供本文档来自技高网
...

【技术保护点】
一种用于屏幕显示设备的图像展示方法,其特征在于,包括:获得待展示图像;选择在预先设定的容器中展示所述图像的方式;按照所选方式在所述容器中动态地展示所述图像的全部内容。

【技术特征摘要】
1.一种用于屏幕显示设备的图像展示方法,其特征在于,包括:获得待展示图像;选择在预先设定的容器中展示所述图像的方式;按照所选方式在所述容器中动态地展示所述图像的全部内容。2.根据权利要求1所述的用于屏幕显示设备的图像展示方法,其特征在于,所述选择在预先设定的容器中展示所述图像的方式,包括:获取所述图像的宽度值和高度值;当所述图像的宽度值大于其高度值时,选择横向滑动的展示方式;当所述图像的宽度值不大于其高度值时,选择纵向滑动的展示方式。3.根据权利要求2所述的用于屏幕显示设备的图像展示方法,其特征在于,所述选择在预先设定的容器中展示所述图像的方式,还包括:获取所述容器的宽度值和高度值;当所述图像的宽度值大于其高度值时,还包括:将所述图像进行等比例缩放,使其高度值与所述容器的高度值相同;和/或,当所述图像的宽度值不大于其高度值时,还包括:将所述图像进行等比例缩放,使其宽度值与所述容器的宽度值相同。4.根据权利要求3所述的用于屏幕显示设备的图像展示方法,其特征在于,当所述图像的宽度值大于其高度值时,在执行所述将所述图像进行等比例缩放的步骤前,执行下述操作:判断所述图像的高度值是否大于所述容器的高度值;若是,执行所述将所述图像进行等比例缩放,使其高度值与所述容器的高度值相同的步骤。5.根据权利要求3所述的用于屏幕显示设备的图像展示方法,其特征在于,当所述图像的宽度值不大于其高度值时,在执行所述将所述图像进行等比例缩放的步骤前,执行下述操作:判断所述图像的宽度值是否大于所述容器的宽度值;若是,执行所述将所述图像进行等比例缩放,使其宽度值与所述容器的宽度值相同的步骤。6.根据权利要求2所述的用于屏幕显示设备的图像展示方法,其特征在于,所述按照所选方式在所述容器中动态地展示所述图像的全部内容,采用如下方式实现:按照预先设定的方向,在所述容器中滑动显示所述图像的全部内容。7.根据权利要求6所述的用于屏幕显示设备的图像展示方法,其特征在于,当选择横向滑动的展示方式时,所述预先设定的方向包括:从左到右,或者从右到左;当选择纵向滑动的展示方式时,所述预先设定的方向包括:从上到下,或者从下到上。8.根据权利要求1所述的用于屏幕显示设备的图像展示方法,其特征在于,循环执行所述按照所选方式在所述容器中动态地展示所述图像的全部内容的步骤。9.根据权利要求1-8任一所述的用于屏幕显示设备的图像展示方法,其特征在于,所述容器为web页面中的、具有固定宽高属性值的DIV元素。10.根据权利要求9所述的用于屏幕显示设备的图像展示方法,其特征在于,所述按照所选方式在所述容器中动态地展示所述图像的全部内容采用如下方式实现:利用css的transition机制,通过调整所述图像在所述容器中的显示位置,在所述容器中动态地展示所述图像的全部内容。11.根据权利要求9所述的用于屏幕显示设备的图像展示方法,其特征在于,当检测到所述DIV元素出现在浏览器的可视区域内时,执行所述按照所选方式在所述容器中动态地展示所述图像的全部内容的步骤。12.根据权利要求11所述的用于屏幕显示设备的图像展示方法,其特征在于,在所述按照所选方式在所述容器中动态地展示所述图像的全部内容...

【专利技术属性】
技术研发人员:张波
申请(专利权)人:阿里巴巴集团控股有限公司
类型:发明
国别省市:开曼群岛;KY

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1