用于屏幕显示设备的图像展示方法及装置的制造方法
【专利摘要】本申请公开了一种用于屏幕显示设备的图像展示方法，包括：获得待展示图像；选择在预先设定的容器中展示所述图像的方式；按照所选方式在所述容器中动态地展示所述图像的全部内容。本申请同时提供一种用于屏幕显示设备的图像展示装置。本申请提供的上述方法，采用了不同于现有技术的动态展示方式，巧妙地解决了信息展示完整性与空间占用率之间的矛盾，在不扩大容器尺寸的条件下，实现了容器尺寸与图像尺寸之间的适配，在有限的展示空间中展示了图像的完整内容。
【专利说明】
用于屏幕显示设备的图像展示方法及装置
技术领域
[0001]本申请涉及图像显示技术，具体涉及一种用于屏幕显示设备的图像展示方法。本申请同时涉及一种用于屏幕显示设备的图像展示装置。
【背景技术】
[0002]随着计算机和互联网技术的发展，出现了众多的为用户提供各种信息及服务的网站，而网页(也称web页面)则是每个网站向用户展示、推荐信息、提供服务的主要方式。一个web页面通常包含多种资源，例如:文字、图片、超链接、表格、表单等。其中，由于文字、表格等所传递的信息是相对枯燥的，而图片通常颜色鲜艳、简洁明了，往往能够带给用户更为直观的感性认识，因此，图片已成为web页面中不可或缺的重要成员之一。
[0003]在web页面中用于展示图片的元素，例如，DIV元素，也称为容器。通常在设计页面时会预先指定容器的大小，而在该容器中展示的图片可能是由第三方提供的，在浏览器加载页面的过程中，根据图片标签的src属性中的URL信息，从网络获取该图片资源。由此可见，由于图片通常是通过网络动态获取的，因此，图片尺寸可能与容器尺寸不匹配，而且经常会出现图片尺寸大于容器尺寸的情况，导致无法在容器的有限空间内完整展示图片，影响用户的浏览体验。
[0004]目前解决上述问题的常用方法是:在设计网页时，尽可能为用于显示图片的容器设置较大的尺寸，即:设置较大的宽度值和高度值。这种方法在一定程度上可以解决上述问题，但是，依然存在以下缺陷:
[0005]I)由于第三方提供的图片资源通常是不可控的，因此，不可避免还是会出现部分图片无法完整显示的问题；
[0006]2)采用这种方式展示图片的完整信息，需要在web页面中占用大幅的展示空间，自然会减少页面展示的其他信息量，这将影响其他信息的展示效果。
【发明内容】
[0007]本申请实施例提供一种用于屏幕显示设备的图像展示方法，以解决现有的静态展示技术无法在有限的展示空间完整展示图像内容的问题。本申请实施例还提供一种用于屏幕显示设备的图像展示装置。
[0008]本申请提供一种用于屏幕显示设备的图像展示方法，包括:
[0009]获得待展不图像；
[0010]选择在预先设定的容器中展示所述图像的方式；
[0011]按照所选方式在所述容器中动态地展示所述图像的全部内容。
[0012]可选的，所述方法包括:
[0013]获取所述图像的宽度值和高度值；
[0014]当所述图像的宽度值大于其高度值时，选择横向滑动的展示方式；
[0015]当所述图像的宽度值不大于其高度值时，选择纵向滑动的展示方式。
[0016]可选的，所述选择在预先设定的容器中展示所述图像的方式，还包括:
[0017]获取所述容器的宽度值和高度值；
[0018]当所述图像的宽度值大于其高度值时，还包括:
[0019]将所述图像进行等比例缩放，使其高度值与所述容器的高度值相同；
[0020]和/或，当所述图像的宽度值不大于其高度值时，还包括:
[0021]将所述图像进行等比例缩放，使其宽度值与所述容器的宽度值相同。
[0022]可选的，当所述图像的宽度值大于其高度值时，在执行所述将所述图像进行等比例缩放的步骤前，执行下述操作:
[0023]判断所述图像的高度值是否大于所述容器的高度值；
[0024]若是，执行所述将所述图像进行等比例缩放，使其高度值与所述容器的高度值相同的步骤。
[0025]可选的，当所述图像的宽度值不大于其高度值时，在执行所述将所述图像进行等比例缩放的步骤前，执行下述操作:
[0026]判断所述图像的宽度值是否大于所述容器的宽度值；
[0027]若是，执行所述将所述图像进行等比例缩放，使其宽度值与所述容器的宽度值相同的步骤。
[0028]可选的，所述按照所选方式在所述容器中动态地展示所述图像的全部内容，采用如下方式实现:
[0029]按照预先设定的方向，在所述容器中滑动显示所述图像的全部内容。
[0030]可选的，当选择横向滑动的展示方式时，所述预先设定的方向包括:从左到右，或者从右到左；
[0031]当选择纵向滑动的展示方式时，所述预先设定的方向包括:从上到下，或者从下到上。
[0032]可选的，循环执行所述按照所选方式在所述容器中动态地展示所述图像的全部内容的步骤。
[0033]可选的，所述容器为web页面中的、具有固定宽高属性值的DIV元素。
[0034]可选的，所述按照所选方式在所述容器中动态地展示所述图像的全部内容采用如下方式实现:
[0035]利用css的transit1n机制，通过调整所述图像在所述容器中的显示位置，在所述容器中动态地展示所述图像的全部内容。
[0036]可选的，当检测到所述DIV元素出现在浏览器的可视区域内时，执行所述按照所选方式在所述容器中动态地展示所述图像的全部内容的步骤。
[0037]可选的，在所述按照所选方式在所述容器中动态地展示所述图像的全部内容的步骤之后，执行下述操作:
[0038]当检测到所述DIV元素不在浏览器可视区域时，停止所述动态展示过程。
[0039]相应的，本申请还提供一种用于屏幕显示设备的图像展示装置，包括:
[0040]图像获得单元，用于获得待展示图像；
[0041]方式选择单元，用于选择在预先设定的容器中展示所述图像的方式；
[0042]动态展示单元，用于按照所选方式在所述容器中动态地展示所述图像的全部内容。
[0043]可选的，所述方式选择单元包括:
[0044]图像参数获取子单元，用于获取所述图像的宽度值和高度值；
[0045]图像参数判断子单元，用于判断所述图像的宽度值是否大于其高度值；
[0046]横向滑动选择子单元，用于当所述图像参数判断子单元的输出为是时，选择横向滑动的展示方式；
[0047]纵向滑动选择子单元，用于当所述图像参数判断子单元得输出为否时，选择纵向滑动的展示方式。
[0048]可选的，所述方式选择单元还包括:
[0049]容器参数获取子单元，用于获取所述容器的宽度值和高度值；
[0050]图像等高缩放子单元，用于当所述图像参数判断子单元的输出为是时，将所述图像进行等比例缩放，使其高度值与所述容器的高度值相同；和/或，
[0051]图像等宽缩放子单元，用于当所述图像参数判断子单元的输出为否时，将所述图像进行等比例缩放，使其宽度值与所述容器的宽度值相同。
[0052]可选的，所述方式选择单元还包括:
[0053]第一缩放判断子单元，用于当所述图像参数判断子单元的输出为是时，判断所述图像的高度值是否大于所述容器的高度值，若是，触发所述图像等高缩放子单元。
[0054]可选的，所述方式选择单元还包括:
[0055]第二缩放判断子单元，用于当所述图像参数判断子单元的输出为否时，判断所述图像的宽度值是否大于所述容器的宽度值，若是，触发所述图像等宽缩放子单元。
[0056]可选的，所述动态展示单元具体用于，按照预先设定的方向，在所述容器中滑动显示所述图像的全部内容。
[0057]可选的，所述动态展示单元具体用于，循环地按照所选方式在所述容器中动态地展示所述图像的全部内容。
[0058]可选的，所述动态展示单元所用的容器为，web页面中的、具有固定宽高属性值的DIV元素。
[0059]可选的，所述动态展示单元具体用于，利用css的transit1n机制，通过调整所述图像在所述容器中的显示位置，在所述容器中动态地展示所述图像的全部内容。
[0060]可选的，所述装置还包括:
[0061]可视检测单元，用于检测所述DIV元素是否出现在浏览器的可视区域内，若是，触发所述动态展示单元。
[0062]可选的，所述可视检测单元还用于，在触发所述动态展示单元工作后，若检测到所述DIV元素不在浏览器可视区域内，则停止所述动态展示单元的工作。
[0063]与现有技术相比，本申请具有以下优点:
[0064]本申请提供的用于屏幕显示设备的图像展示方法，首先获得待展示图像，选择在预先设定的容器中展示图像的方式，并按照所选方式在所述容器中动态地展示所述图像的全部内容。本申请提供的上述方法，采用了不同于现有技术的动态展示方式，巧妙地解决了信息展示完整性与空间占用率之间的矛盾，在不扩大容器尺寸的条件下，实现了容器尺寸与图像尺寸之间的适配，在有限的展示空间中展示了图像的完整内容。
【附图说明】
[0065]图1是本申请的一种用于屏幕显示设备的图像展示方法的实施例的流程图；
[0066]图2是本实施例提供的选择图像展示方式的处理流程图；
[0067]图3是本实施例提供的从下到上纵向滑动显示图像的示意图；
[0068]图4是本实施例提供的在web页面的DIV中动态展示所述图像全部内容的流程图；
[0069]图5是本申请的一种用于屏幕显示设备的图像展示装置的实施例的示意图。
【具体实施方式】
[0070]在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是，本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此，本申请不受下面公开的具体实施的限制。
[0071]在本申请中，分别提供了一种用于屏幕显示设备的图像展示方法，以及一种用于屏幕显示设备的图像展示装置，在下面的实施例中逐一进行详细说明。为了便于理解，在描述实施例之前，先对本申请的技术方案作简要的说明。
[0072]目前web页面中用于展示图像信息的容器，其宽度和高度值通常是预先指定的，而需要通过该容器展示的图像是多种多样的，其宽度和高度值可能大于容器的尺寸，导致无法在容器中完整地展示图像信息。针对这一问题，本申请实施例的技术方案通过选择不同的展示方式(例如，横向滑动显示、纵向滑动显示)，在容器中动态地展示所述图像的全部内容，从而实现了在有限的展示空间中展示图像完整信息的功能。
[0073]本申请的技术方案虽然是针对web页面中的图像展示问题提出的，但是，其应用领域并不局限于基于浏览器的应用，在其他的应用中，例如native APP,或者是桌面电脑中的应用，只要是在屏幕显示设备上的固定尺寸容器中展示图像，特别是在图像尺寸大于容器尺寸、或者图像尺寸无法提前获知的应用场景，都可以采用本申请提供的方法，并获得相应的有益效果。
[0074]基于上述对应用场景的说明，本技术方案所述的容器，可以是web页面中用于展示图片的DIV元素对应的显示区域，也可以是图片框以及其他用于显示图像的、具有固定的宽度值和高度值的控件或者区域，在下文对实施例的描述中统一称为容器。下面对本申请的实施例作详细说明。
[0075]请参考图1，其为本申请的一种用于屏幕显示设备的图像展示方法的实施例的流程图。所述方法包括如下步骤:
[0076]步骤101:获得待展示图像。
[0077]所述待展示图像是要在预先设定的容器中展示的图像。所述图像可以是从客户端、服务器等计算机中已存储的图片资源中读取的，也可以是从具有摄像装置的设备中读取的，例如，手机、照相机等；也可以是通过网络获取的。
[0078]以在web页面的DIV容器中展示图像为例，web页面的html代码片段如下所示:
[0079]<div id = 〃item"style = "width:300px ;height: 200px">
[0080]<img class = 〃IMG〃style = 〃 高宽根据横竖图适配” src = 〃url〃/>
[0081]</div>
[0082]其中，用DIV搭建的具有固定宽高属性值的容器ID为item，其宽度值为300像素，高度值为200像素，在该DIV下有一个img标签，其src属性值给出了要在DIV容器中展示的图像的URL地址信息。浏览器在加载包含上述html代码片段的web页面时，可以根据该URL地址信息获取相应的待展示图像。
[0083]步骤102:选择在预先设定的容器中展示所述图像的方式。
[0084]本实施例提供的图像展示方法，采用动态展示方式，实现了在有限的容器中展示图像完整信息的功能。在具体的实施中，所述动态展示方式可以有多种，例如，可以根据容器的尺寸，将待展示图像分为几个子部分，然后在所述容器中依次显示每个子部分的图像。
[0085]为了向用户提供良好的视觉感受，本实施例的技术方案提供了在所述容器中滑动展示图像的优选实施方式，在本步骤根据所述图像的宽度值和高度值进行滑动展示方式的选择，具体说包括步骤102-1至102-3，下面结合附图2作进一步说明。
[0086]步骤102-1:获取所述图像和所述容器的宽度值与高度值。
[0087]在具体实施时，可以根据所述图像的格式以及应用平台的类型，通过相应的文件读取操作或者是调用平台提供的接口获取所述图像的宽度值。例如，在windows应用中，可以读取BMP文件头部的BITMAPFILEHEADER以及BITMAPINFOHEADER数据结构，其中的biffidth是BMP图像的宽度，biHeight是BMP图像的高度；对于在web页面中展示的图像，则可以利用JQUERY获取图像的宽度值和高度值。
[0088]对于所述容器的宽高值，通常可以通过读取相应控件的属性值来获取，对于web页面中的DIV容器，也可以利用JQUERY获取其宽度值和高度值，例如，通过
width O获取id为item的DIV的宽度值，通过$(〃#item〃).height O获取id为item的DIV的高度值。
[0089]步骤102-2:判断所述图像的宽度值是否大于其高度值，若是，执行步骤102-3，否贝IJ，执行步骤102-4。
[0090]当所述图像的宽度值大于其高度值时，说明所述图像是横图，转到步骤102-3执行；当所述图像的宽度值不大于其高度值时，说明所述图像是竖图，转到步骤102-4执行。
[0091]步骤102-3:选择横向滑动的展示方式，并将所述图像进行等比例缩放，使其高度值与所述容器的高度值相同。
[0092]对于横图，可以选择横向滑动的展示方式，即在所述容器中，采用横向滑动的动画方式显示所述图像的全部内容。
[0093]进一步地，考虑到所述图像的高度值可能大于所述容器的高度值，在这种情况下，所述图像在横向滑动过程中会有部分内容无法展示；而当所述图像的高度值小于所述容器的高度值时，所述图像在横向滑动过程中虽然可以完整地展示，但是，所述容器在竖直方向的空间并没有被充满，可能影响视觉效果。针对上述两种情况，本实施例的技术方案，提供了在选择横向滑动的展示方式时，对所述图像进行等比例缩放的优选实施方式。
[0094]具体说，通过对所述图像进行等比例缩放，使其高度值与所述容器的高度值相同。例如，所述图像的宽度值和高度值分别为imgWidth和imgHeight，所述容器的宽度值和高度值分别为divWidth和divHeight，那么本步骤的等比例缩放操作，可以将所述图像的宽度值和高度值按照如下公式进行调整:
[0095]图像宽度值=(imgffidth^divHeight) / imgHeight
[0096]图像高度值=divHeight
[0097]之所以要采用上述等比例缩放方式，是为了避免所述图像在缩放后变形，影响展示效果。
[0098]步骤102-4:选择纵向滑动的展示方式，并将所述图像进行等比例缩放，使其宽度值与所述容器的宽度值相同。
[0099]对于竖图，可以选择纵向滑动的展示方式，即在所述容器中，采用纵向滑动的动画方式显示所述图像的全部内容。
[0100]与步骤102-3选择横向展示方式类似，在选择纵向展示方式后，也可以通过对所述图像进行等比例缩放，使其宽度值与所述容器的宽度值相同，例如，可以将所述图像的宽度值和高度值按照如下公式进行调整(各参数的含义同步骤102-3):
[0101]图像宽度值=divWidth
[0102]图像高度值=(divWidth*imgHeight)/imgWidth
[0103]至此，通过上述步骤102-1至102-4，描述了选择动态展示方式以及进行相应的图像等比例缩放的处理过程。
[0104]此外，还可以进一步细化这部分处理，考虑到矢量图在经过缩放处理后不会影响图像的展示效果，而非矢量图在放大后可能会影响图像的质量，例如模糊不清。因此可以针对具体的应用需求为缩放操作添加一定的限制条件。例如，在web页面中展示的图像通常不是矢量图，因此将本实施例提供的方法应用于web页面的图像展示时，可以不进行所述图像的放大操作，这种情况下可以采用如下的处理流程:
[0105]当所述图像的宽度值大于其高度值时，选择横向滑动的展示方式，并判断所述图像的高度值是否大于所述容器的高度值，若是，将所述图像进行等比例缩放，使其高度值与所述容器的高度值相同；
[0106]和/或，当所述图像的宽度值不大于其高度值时，选择纵向滑动的展示方式，并判断所述图像的宽度值是否大于所述容器的宽度值，若是，将所述图像进行等比例缩放，使其宽度值与所述容器的宽度值相同。
[0107]步骤103:按照所选方式在所述容器中动态地展示所述图像的全部内容。
[0108]在步骤102中选择了动态展示图像的方式，在本步骤中则按照所选方式在所述容器中动态地展示所述图像的全部内容。
[0109]如果采用横向滑动的展示方式，则可以按照预先设定的方向从左到右或者从右到左进行滑动展示。对于从右到左滑动展示，可以先将所述图像静态地显示在所述容器中作为初始状态，例如，图像的左边界与所述容器的左边界重合；也可以初始状态时不在所述容器中显示图像，而以所述图像的左边界与所述容器的右边界重合作为起点。然后从右向左滑动展示图像，直至所述图像的右边界与所述容器的右边界重合，从而完成一次动态展示过程。从左向右的滑动展示过程与上述方式原理相同，不再赘述。
[0110]同样的道理，如果采用纵向滑动的展示方式时，则可以按照预先设定的方向从上到下或者从下到上进行滑动展示。对于从下到上滑动展示，可以先将所述图像静态地显示在所述容器中作为初始状态，例如，图像的上边界与所述容器的上边界重合；也可以初始状态时不在所述容器中显示图像，以所述图像的上边界与所述容器的下边界重合作为起点。然后从下向上滑动展示图像，直至所述图像的下边界与所述容器的下边界重合，从而完成一次动态展示过程。从上向下的滑动展示过程与上述方式原理相同，不再赘述。
[0111]考虑到用户通常的浏览习惯，其中的从右到左、以及从下到上的滑动展示方式，为本实施例的优选实施方式。请参见图3，其为从下到上纵向滑动显示图像的示意图。在该示意图中，虚线框代表展示所述图像的容器所在的显示区域，所述图像为竖图，因此选择了纵向滑动的展示方式，其中图(a)为滑动展示的初始状态，此时，所述图像以与容器的上边界重合的方式静态显示在所述容器中，部分图像内容处于容器的外部，未得到展示；随后按照箭头指示的方向开始向上滑动展示，图(b)为本次展示过程结束时的示意图，此时整个图像的各个部分都在所述容器中得到了展示。
[0112]优选的，为了使用户能够更加准确地获取图像信息，在具体实施中，还可以采用循环展示方式，即，从初始状态开始完成一次动态展示过程后，重新回到初始状态，再开始新的一轮动态展示过程......按照上述方式循环执行。
[0113]具体实施时，可以利用应用平台提供的图像绘制接口，通过定期(例如，每20ms)在所述容器的指定位置绘制所述图像的指定部分实现动态展示过程。例如，MFC类库中针对Image类提供的DrawImageO方法可以在指定的位置绘制指定图像的指定部分，对于在web页面展示图像来说，也可以通过JavaScript代码调用类似的drawlmage O方法，实现所述动态展示功能。
[0114]优选的，还可以利用应用平台提供的动画机制实现动态展示过程。例如，在web页面中可以利用CSS transit1n机制实现图像的动态展示。Transit1n是CSS3中新添加的特性，采用该特性，当元素的大小、位置、颜色、布局、透明度等数值发生改变时，可以产生过渡的动画效果。
[0115]同时，考虑到浏览器在展示页面的过程中，会根据用户对浏览窗口滑块的操作，更新在窗口可视区域中显示的页面内容。基于上述考虑，为了减少对设备资源的占用，可以仅在用于展示图像的DIV容器出现在浏览器的可视区域时，触发动态展示过程。下面以在web页面的具有固定宽高属性值的DIV元素中动态展示图像为例，通过步骤103-1至103-3对该过程作进一步说明，相关处理流程请参见图4。
[0116]步骤103-1:判断所述DIV元素是否出现在浏览器的可视区域内；若是，执行步骤103-2。
[0117]可以利用JQUERY监测DIV元素与浏览器可视区域之间的位置关系，从而判断所述容器是否出现在浏览器的可视区域。为此，先介绍通过JQUERY获取的4个关键属性，以所述DIV的id为item为例。
[0118](I) jQuery (’ #item’).0ffset ().top
[0119]获取DIV容器的绝对偏移量，即DIV容器的实际尺寸的上边界到页面顶端的距离，这个值不随浏览器窗口滚动而改变。
[0120](2) j Query (，#item，).0uterHeight O
[0121]获取DIV容器的实际尺寸。
[0122](3) jQuery (window).scrollTop ()
[0123]获取浏览器窗口滚动的顶部偏移量，即此时可视区域的上边界到页面上边界的偏移量，也可以理解成整个页面滚动了多少距离。
[0124](4) jQuery (window).height ()
[0125]获取浏览器窗口可视区域的高度。
[0126]在DIV容器随着页面向上滚动超出可视区域的过程中，可视区域的顶部偏移量处于逐渐增大中，当可视区域的顶部偏移量，大于容器上边界到页面顶端的距离与容器本身高度之和时，说明该容器已经在向上滚动过程中超出了浏览器窗口的可视区域，即满足以下条件1:
[0127]jQuery (window).scrollTop () > (jQuery ( ‘#item，).0ffset().top+jQuery ( mem，).0uterHeight ())
[0128]在容器随着页面向下滚动超出可视区域的过程中，可视区域的顶部偏移量处于逐渐减少中，当可视区域的顶部偏移量，小于容器上边界到页面顶端的距离与可视区域高度之差时，说明该容器已经在向下滚动过程中超出了浏览器窗口的可视区域，即满足以下条件2:
[0129]jQuery (window).scrollTop () < (jQuery ( ‘#item，).0ffset().top-jQuery(window).height ())
[0130]因此，本步骤可以对条件I和条件2的表达式执行或运算，如果结果为false，说明上述两个条件都不满足，则判定所述DIV容器出现在可视区域中，可以继续执行步骤103-2。
[0131]步骤103-2:利用css的transit1n属性，通过调整所述图像在所述容器中的显示位置，在所述容器中动态地展示所述图像的全部内容。
[0132]本实施例采用JQUERY控制CSS的样式，通过变更图像的坐标值，由Transit1n机制自动地采用逐渐过渡的方式完成坐标变换过程，从而实现图像从初始位置滑动到目标位置的动画展示效果。
[0133]对于横图，由于采用横向滑动方式，需要变更所述图像位置的横坐标值。以从右向左滑动为例，从所述图像在所述容器中显示的初始状态，过渡为最终所述图像的右边界与所述容器的右边界重合，那么所述图像到达目标位置时，其横坐标发生水平位移的像素数如以下公式所示:
[0134](I)初始状态为所述图像的左边界与所述容器的左边界重合
[0135]横坐标水平位移像素数=所述图像缩放后的宽度-容器宽度；
[0136](2)初始状态为所述图像的左边界与所述容器的右边界重合
[0137]横坐标水平位移像素数=所述图像缩放后的宽度；
[0138]对于从左向右滑动，横坐标水平位移像素数的计算，与从右向左滑动的原理是相同的，此处不再赘述。
[0139]对于竖图，由于采用纵向滑动方式，需要变更所述图像位置的纵坐标值。以从下向上滑动为例，其纵坐标发生垂直位移的像素数如以下公式所示:
[0140](I)初始状态为所述图像的上边界与所述容器的上边界重合
[0141]纵坐标垂直位移像素数=所述图像缩放后的高度-容器高度；
[0142](2)初始状态为所述图像的上边界与所述容器的下边界重合
[0143]纵坐标垂直位移像素数=所述图像缩放后的高度；
[0144]对于从上向下滑动，纵坐标垂直位移像素数的计算，与从下向上滑动的原理是相同的，此处不再赘述。
[0145]按照上述方式变更所述图像在所述容器中的坐标值，transit1n机制就会采用过渡方式在预先设定的时间段内完成上述变更，从而呈现出图像在容器内滑动展示的动画效果，从而完整地展示所述图像的全部内容。
[0146]所述预先设定的时间段，是指CSS3transit1n包含的属性之一:变换延续的时间(transit1n-durat1n)，即，转换过程的持续时间。具体到本实施例，就是指完成一次上述动态展示过程的时间。在具体实施时，可以将transit1n-durat1n设置为一个固定的经验值，例如2s ;也可以根据坐标值变更的具体数值进行设置，对于横向滑动方式，可以根据横坐标水平位移像素数进行设置，对于纵向滑动方式，可以根据纵坐标垂直位移像素数进行设置，使得动态展示过程的持续时间与坐标值的变更成正比。
[0147]此外，还可以对CSS3transit1n的其他属性进行设置，例如，变换的速率变化(transit1n-timing-funct1n)以及变换延迟时间(transit1n-delay)等，从而获得不同的动态展示效果。
[0148]为了使用户能够更加准确地获取图像信息，在具体实施中，还可以采用循环展示方式，即，从初始状态开始，通过调整坐标值触发transit1n完成一次动态展示过程后，重新回到初始状态，再次调整坐标值触发transit1n开始新一轮动态展示过程......按照上述方式循环执行。
[0149]步骤103-3:检测所述DIV元素是否不在浏览器可视区域中，若是，停止所述动态展示过程。
[0150]在页面的DIV容器中开始动态展示图像后，特别是开始循环展示过程后，可以执行本步骤判断所述DIV元素是否脱离了可视区域，其基本原理与步骤103-1是相同的。在步骤103-1给出的条件I和条件2中，只要满足其中之一，则说明所述DIV元素随着页面的滚动，已经超出了浏览器窗口的可视区域。
[0151]因此，本步骤可以对步骤103-1给出的条件I和条件2的表达式执行或运算，结果为true，说明所述DIV元素已经不在可视区域中，可以停止步骤103-2执行的动态展示过程。
[0152]综上所述，本申请提供的用于屏幕显示设备的图像展示方法，由于采用了不同于现有技术的动态展示方式，巧妙地解决了信息展示完整性与空间占用率之间的矛盾，在不扩大容器尺寸的条件下，实现了容器尺寸与图像尺寸之间的适配，在有限的展示空间中展示了图像的完整内容。
[0153]在上述的实施例中，提供了一种用于屏幕显示设备的图像展示方法，与之相对应的，本申请还提供一种用于屏幕显示设备的图像展示装置。请参看图5，其为本申请的一种用于屏幕显示设备的图像展示装置的实施例示意图。由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。
[0154]本实施例的一种用于屏幕显示设备的图像展示装置，包括:
[0155]图像获得单元501，用于获得待展示图像；
[0156]方式选择单元502，用于选择在预先设定的容器中展示所述图像的方式；
[0157]动态展示单元503，用于按照所选方式在所述容器中动态地展示所述图像的全部内容。
[0158]可选的，所述方式选择单元包括:
[0159]图像参数获取子单元，用于获取所述图像的宽度值和高度值；
[0160]图像参数判断子单元，用于判断所述图像的宽度值是否大于其高度值；
[0161]横向滑动选择子单元，用于当所述图像参数判断子单元的输出为是时，选择横向滑动的展示方式；
[0162]纵向滑动选择子单元，用于当所述图像参数判断子单元得输出为否时，选择纵向滑动的展示方式。
[0163]可选的，所述方式选择单元还包括:
[0164]容器参数获取子单元，用于获取所述容器的宽度值和高度值；
[0165]图像等高缩放子单元，用于当所述图像参数判断子单元的输出为是时，将所述图像进行等比例缩放，使其高度值与所述容器的高度值相同；
[0166]图像等宽缩放子单元，用于当所述图像参数判断子单元的输出为否时，将所述图像进行等比例缩放，使其宽度值与所述容器的宽度值相同。
[0167]可选的，所述方式选择单元还包括:
[0168]第一缩放判断子单元，用于当所述图像参数判断子单元的输出为是时，判断所述图像的高度值是否大于所述容器的高度值，若是，触发所述图像等高缩放子单元。
[0169]可选的，所述方式选择单元还包括:
[0170]第二缩放判断子单元，用于当所述图像参数判断子单元的输出为否时，判断所述图像的宽度值是否大于所述容器的宽度值，若是，触发所述图像等宽缩放子单元。
[0171]可选的，所述动态展示单元具体用于，按照预先设定的方向，在所述容器中滑动显示所述图像的全部内容。
[0172]可选的，所述动态展示单元具体用于，循环地按照所选方式在所述容器中动态地展示所述图像的全部内容。
[0173]可选的，所述动态展示单元所用的容器为，web页面中的、具有固定宽高属性值的DIV元素。
[0174]可选的，所述动态展示单元具体用于，利用css的transit1n机制，通过调整所述图像在所述容器中的显示位置，在所述容器中动态地展示所述图像的全部内容。
[0175]可选的，所述装置还包括:
[0176]可视检测单元，用于检测所述DIV元素是否出现在浏览器的可视区域内，若是，触发所述动态展示单元。
[0177]可选的，所述可视检测单元还用于，在触发所述动态展示单元工作后，若检测到所述DIV元素不在浏览器可视区域内，则停止所述动态展示单元的工作。
[0178]本申请虽然以较佳实施例公开如上，但其并不是用来限定本申请，任何本领域技术人员在不脱离本申请的精神和范围内，都可以做出可能的变动和修改，因此本申请的保护范围应当以本申请权利要求所界定的范围为准。
[0179]在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
[0180]内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
[0181]1、计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
[0182]2、本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
【主权项】
1.一种用于屏幕显示设备的图像展示方法，其特征在于，包括: 获得待展示图像； 选择在预先设定的容器中展示所述图像的方式； 按照所选方式在所述容器中动态地展示所述图像的全部内容。2.根据权利要求1所述的用于屏幕显示设备的图像展示方法，其特征在于，所述选择在预先设定的容器中展示所述图像的方式，包括: 获取所述图像的宽度值和高度值； 当所述图像的宽度值大于其高度值时，选择横向滑动的展示方式； 当所述图像的宽度值不大于其高度值时，选择纵向滑动的展示方式。3.根据权利要求2所述的用于屏幕显示设备的图像展示方法，其特征在于，所述选择在预先设定的容器中展示所述图像的方式，还包括: 获取所述容器的宽度值和高度值； 当所述图像的宽度值大于其高度值时，还包括: 将所述图像进行等比例缩放，使其高度值与所述容器的高度值相同； 和/或，当所述图像的宽度值不大于其高度值时，还包括: 将所述图像进行等比例缩放，使其宽度值与所述容器的宽度值相同。4.根据权利要求3所述的用于屏幕显示设备的图像展示方法，其特征在于，当所述图像的宽度值大于其高度值时，在执行所述将所述图像进行等比例缩放的步骤前，执行下述操作: 判断所述图像的高度值是否大于所述容器的高度值； 若是，执行所述将所述图像进行等比例缩放，使其高度值与所述容器的高度值相同的步骤。5.根据权利要求3所述的用于屏幕显示设备的图像展示方法，其特征在于，当所述图像的宽度值不大于其高度值时，在执行所述将所述图像进行等比例缩放的步骤前，执行下述操作: 判断所述图像的宽度值是否大于所述容器的宽度值； 若是，执行所述将所述图像进行等比例缩放，使其宽度值与所述容器的宽度值相同的步骤。6.根据权利要求2所述的用于屏幕显示设备的图像展示方法，其特征在于，所述按照所选方式在所述容器中动态地展示所述图像的全部内容，采用如下方式实现: 按照预先设定的方向，在所述容器中滑动显示所述图像的全部内容。7.根据权利要求6所述的用于屏幕显示设备的图像展示方法，其特征在于，当选择横向滑动的展示方式时，所述预先设定的方向包括:从左到右，或者从右到左； 当选择纵向滑动的展示方式时，所述预先设定的方向包括:从上到下，或者从下到上。8.根据权利要求1所述的用于屏幕显示设备的图像展示方法，其特征在于，循环执行所述按照所选方式在所述容器中动态地展示所述图像的全部内容的步骤。9.根据权利要求1-8任一所述的用于屏幕显示设备的图像展示方法，其特征在于，所述容器为web页面中的、具有固定宽高属性值的DIV元素。10.根据权利要求9所述的用于屏幕显示设备的图像展示方法，其特征在于，所述按照所选方式在所述容器中动态地展示所述图像的全部内容采用如下方式实现: 利用CSS的transit1n机制，通过调整所述图像在所述容器中的显示位置，在所述容器中动态地展示所述图像的全部内容。11.根据权利要求9所述的用于屏幕显示设备的图像展示方法，其特征在于，当检测到所述DIV元素出现在浏览器的可视区域内时，执行所述按照所选方式在所述容器中动态地展示所述图像的全部内容的步骤。12.根据权利要求11所述的用于屏幕显示设备的图像展示方法，其特征在于，在所述按照所选方式在所述容器中动态地展示所述图像的全部内容的步骤之后，执行下述操作: 当检测到所述DIV元素不在浏览器可视区域时，停止所述动态展示过程。13.一种用于屏幕显示设备的图像展示装置，其特征在于，包括: 图像获得单元，用于获得待展示图像； 方式选择单元，用于选择在预先设定的容器中展示所述图像的方式； 动态展示单元，用于按照所选方式在所述容器中动态地展示所述图像的全部内容。14.根据权利要求13所述的用于屏幕显示设备的图像展示装置，其特征在于，所述方式选择单元包括: 图像参数获取子单元，用于获取所述图像的宽度值和高度值； 图像参数判断子单元，用于判断所述图像的宽度值是否大于其高度值； 横向滑动选择子单元，用于当所述图像参数判断子单元的输出为是时，选择横向滑动的展示方式； 纵向滑动选择子单元，用于当所述图像参数判断子单元得输出为否时，选择纵向滑动的展示方式。15.根据权利要求14所述的用于屏幕显示设备的图像展示装置，其特征在于，所述方式选择单元还包括: 容器参数获取子单元，用于获取所述容器的宽度值和高度值； 图像等高缩放子单元，用于当所述图像参数判断子单元的输出为是时，将所述图像进行等比例缩放，使其高度值与所述容器的高度值相同；和/或， 图像等宽缩放子单元，用于当所述图像参数判断子单元的输出为否时，将所述图像进行等比例缩放，使其宽度值与所述容器的宽度值相同。16.根据权利要求15所述的用于屏幕显示设备的图像展示装置，其特征在于，所述方式选择单元还包括: 第一缩放判断子单元，用于当所述图像参数判断子单元的输出为是时，判断所述图像的高度值是否大于所述容器的高度值，若是，触发所述图像等高缩放子单元。17.根据权利要求15所述的用于屏幕显示设备的图像展示装置，其特征在于，所述方式选择单元还包括: 第二缩放判断子单元，用于当所述图像参数判断子单元的输出为否时，判断所述图像的宽度值是否大于所述容器的宽度值，若是，触发所述图像等宽缩放子单元。18.根据权利要求14所述的用于屏幕显示设备的图像展示装置，其特征在于，所述动态展示单元具体用于，按照预先设定的方向，在所述容器中滑动显示所述图像的全部内容。19.根据权利要求13所述的用于屏幕显示设备的图像展示装置，其特征在于，所述动态展示单元具体用于，循环地按照所选方式在所述容器中动态地展示所述图像的全部内容。20.根据权利要求13-19任一所述的用于屏幕显示设备的图像展示装置，其特征在于，所述动态展示单元所用的容器为，web页面中的、具有固定宽高属性值的DIV元素。21.根据权利要求20所述的用于屏幕显示设备的图像展示装置，其特征在于，所述动态展示单元具体用于，利用css的transit1n机制，通过调整所述图像在所述容器中的显示位置，在所述容器中动态地展示所述图像的全部内容。22.根据权利要求20所述的用于屏幕显示设备的图像展示装置，其特征在于，还包括: 可视检测单元，用于检测所述DIV元素是否出现在浏览器的可视区域内，若是，触发所述动态展示单元。23.根据权利要求22所述的用于屏幕显示设备的图像展示装置，其特征在于，所述可视检测单元还用于，在触发所述动态展示单元工作后，若检测到所述DIV元素不在浏览器可视区域内，则停止所述动态展示单元的工作。
【文档编号】G06F9/44GK105988793SQ201510073111
【公开日】2016年10月5日
【申请日】2015年2月11日
【发明人】张波
【申请人】阿里巴巴集团控股有限公司