CN105786433A - 显示方法及装置 - Google Patents

Abstract

本发明公开揭示了一种显示方法及装置，属于图像处理领域。该方法包括：将N个显示图像并列显示，N个显示图像中包括一个处于展开状态的显示图像和N‑1个处于重叠状态的显示图像，N为正整数，当第i个显示图像处于展开状态时，在与第i个显示图像对应的第一显示区域内对第i个显示图像的全部内容进行显示，1≤i≤N，当第j个显示图像处于重叠状态时，在与第j个显示图像对应的，小于第一显示区域的第二显示区域内对第j个显示图像中的视觉焦点内容进行显示，1≤j≤N；解决了终端的浏览器使用平铺的方式显示图像而占据很大的页面空间的问题；达到了将没有被查看的显示图像在较小的区域内重叠显示，既不影响用户浏览，又节约了页面空间的效果。

Description

显示方法及装置

技术领域

本公开涉及图像处理领域，特别涉及一种显示方法及装置。

背景技术

终端的浏览器在显示多张图片时，通常是以平铺的方式进行显示。

浏览器将每张图片在各自对应的显示区域内进行显示，根据显示区域的大小调整图片的缩放比例，使图片在显示区域内显示全部内容，不同的显示区域以平铺的方式进行排列。

当终端的浏览器需要显示的图片数量很多时，图片以平铺的方式进行显示需要占据很大的页面空间。

发明内容

为了解决浏览器以平铺方式显示多张图片时占据很大的页面空间的问题，本公开提供一种显示方法及装置。所述技术方案如下：

根据本公开实施例的第一方面，提供一种显示方法，该方法包括：

将N个显示图像并列显示，N个显示图像中包括一个处于展开状态的显示图像和N-1个处于重叠状态的显示图像，N为正整数；

当N个显示图像中的第i个显示图像处于展开状态时，在与第i个显示图像对应的第一显示区域内对第i个显示图像的全部内容进行显示，1≤i≤N；

当N个显示图像中的第j个显示图像处于重叠状态时，在与第j个显示图像对应的第二显示区域内对第j个显示图像中的视觉焦点内容进行显示，第二显示区域小于第一显示区域，1≤j≤N。

可选的，该方法还包括：

接收触发信息；

当第j个显示图像处于重叠状态，且触发信息位于与第j个显示图像对应的第二显示区域内时，将第j个显示图像从重叠状态切换至展开状态；

当第i个显示图像处于展开状态，且触发信息位于与第i个显示图像对应的第一显示区域外时，将第i个显示图像从展开状态切换至重叠状态。

可选的，当N个显示图像中的第j个显示图像处于重叠状态时，在第二显示区域内对第j个显示图像中的视觉焦点内容进行显示，包括：

确定第一位置信息，第一位置信息是第j个显示图像处于重叠状态时的默认显示位置的位置信息；

获取第j个显示图像中视觉焦点内容的第二位置信息；

将第j个显示图像的显示位置的位置信息由第一位置信息修改为第二位置信息，当N个显示图像中的第j个显示图像处于重叠状态时，使第j个显示图像中的视觉焦点内容在第二显示区域内进行显示。

可选的，将第j个显示图像从重叠状态切换至展开状态，包括：

根据第一位置信息和第二位置信息确定位移信息；

在将第j个显示图像从重叠状态切换至展开状态时，根据位移信息移动第j个显示图像，使第j个显示图像在与第j个显示图像对应的第一显示区域内进行完整显示。

可选的，根据位移信息移动第j个显示图像，包括：

将位移信息作为调用参数，调用层叠样式表CSS3的变形处理属性中的平移变换函数；

通过平移变换函数以过渡效果移动第j个显示图像。

可选的，根据位移信息移动第j个显示图像，包括：

通过JavaScript配置时间周期和移动参数，移动参数用于指示在一个时间周期内对第j个显示图像的位置属性进行移动的移动量；

根据位移信息和移动参数确定时间周期的个数；

根据时间周期的个数对第j个显示图像的位置属性进行若干次移动。

根据本公开实施例的第二方面，提供一种显示装置，该装置包括：

第一显示模块，用于将N个显示图像并列显示，N个显示图像中包括一个处于展开状态的显示图像和N-1个处于重叠状态的显示图像，N为正整数；

第二显示模块，用于当N个显示图像中的第i个显示图像处于展开状态时，在与第i个显示图像对应的第一显示区域内对第i个显示图像的全部内容进行显示，1≤i≤N；

第三显示模块，用于当N个显示图像中的第j个显示图像处于重叠状态时，在与第j个显示图像对应的第二显示区域内对第j个显示图像中的视觉焦点内容进行显示，第二显示区域小于第一显示区域，1≤j≤N。

可选的，该装置还包括：

接收模块，用于接收触发信息；

第一处理模块，用于当第j个显示图像处于重叠状态，且触发信息位于与第j个显示图像对应的第二显示区域内时，将第j个显示图像从重叠状态切换至展开状态；

第二处理模块，用于当第i个显示图像处于展开状态，且触发信息位于与第i个显示图像对应的第一显示区域外时，将第i个显示图像从展开状态切换至重叠状态。

可选的，第三显示模块，包括：

第一确定子模块，用于确定第一位置信息，第一位置信息是第j个显示图像处于重叠状态时的默认显示位置的位置信息；

获取子模块，用于获取第j个显示图像中视觉焦点内容的第二位置信息；

显示子模块，用于将所述第j个显示图像的显示位置的位置信息由第一位置信息修改为第二位置信息，当所述N个显示图像中的第j个显示图像处于所述重叠状态时，使第j个显示图像中的视觉焦点内容在第二显示区域内进行显示。

可选的，第一处理模块包括：

第三确定子模块，用于根据第一位置信息和第二位置信息确定位移信息；

第二处理子模块，用于在将第j个显示图像从重叠状态切换至展开状态时，根据位移信息移动第j个显示图像，使第j个显示图像在与第j个显示图像对应的第一显示区域内进行完整显示。

可选的，第二处理子模块包括：

调用子模块，用于将位移信息作为调用参数，调用层叠样式表CSS3的变形处理属性中的平移变换函数；

第一移动子模块，通过平移变换函数以过渡效果移动第j个显示图像。

可选的，第二处理子模块包括：

配置子模块，用于通过JavaScript配置时间周期和移动参数，移动参数用于指示在一个时间周期内对第j个显示图像的位置属性进行移动的移动量；

第四确定子模块，用于根据位移信息和移动参数确定时间周期的个数；

第二移动子模块，用于根据时间周期的个数对第j个显示图像的位置属性进行若干次移动。

本公开的实施例提供的技术方案可以包括以下有益效果：

通过将N个显示图像并列显示，N个显示图像中包括一个处于展开状态的显示图像和N-1个处于重叠状态的显示图像，N为正整数，当N个显示图像中的第i个显示图像处于展开状态时，在与第i个显示图像对应的第一显示区域内对第i个显示图像的全部内容进行显示，1≤i≤N，当N个显示图像中的第j个显示图像处于重叠状态时，在与第j个显示图像对应的第二显示区域内对第j个显示图像中的视觉焦点内容进行显示，第二显示区域小于第一显示区域，1≤j≤N；解决了当终端的浏览器使用平铺的方式显示大量照片时，占据很大的页面空间的问题；达到了将没有被查看的显示图像重叠，只在较小的显示区域内显示视觉焦点内容，既不影响用户浏览，又节约了页面空间的效果。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并于说明书一起用于解释本公开的原理。

图1是根据一示例性实施例示出的一种显示方法的流程图；

图2是根据另一示例性实施例示出的一种显示方法的流程图；

图3A是根据另一示例性实施例示出的一种显示效果示意图；

图3B是根据另一示例性实施例示出的一种显示效果示意图；

图4是根据另一示例性实施例示出的一种显示效果示意图；

图5是根据另一示例性实施例示出的一种显示方法的流程图；

图6是根据另一示例性实施例示出的一种显示效果示意图；

图7是根据另一示例性实施例示出的一种显示方法的流程图；

图8是根据另一示例性实施例示出的一种显示效果示意图；

图9是根据另一示例性实施例示出的一种显示方法的流程图；

图10是根据另一示例性实施例示出的一种显示方法的流程图；

图11是根据另一示例性实施例示出的一种显示效果示意图；

图12是根据一示例性实施例示出的一种显示装置的框图；

图13是根据另一示例性实施例示出的一种显示装置的框图；

图14A是根据另一示例性实施例示出的一种显示装置的框图；

图14B是根据另一示例性实施例示出的一种显示装置的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

本公开各个实施例提供的显示方法，可以由安装有至少一个浏览器的终端设备来实现，该终端设备可以是手机、平板电脑、电子书阅读器、MP3(MovingPicture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)播放器、MP4(Moving Picture Experts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、便携式计算机和台式计算机之类的电子设备。

图1是根据一示例性实施例示出的一种显示方法的流程图，本实施例以该显示方式用于上述终端设备中来举例说明，该方法可以包括以下几个步骤：

在步骤101中，将N个显示图像并列显示，N个显示图像中包括一个处于展开状态的显示图像和N-1个处于重叠状态的显示图像，N为正整数。

在步骤102中，当N个显示图像中的第i个显示图像处于展开状态时，在与第i个显示图像对应的第一显示区域内对第i个显示图像的全部内容进行显示，1≤i≤N。

在步骤103中，当N个显示图像中的第j个显示图像处于重叠状态时，在与第j个显示图像对应的第二显示区域内对第j个显示图像中的视觉焦点内容进行显示，第二显示区域小于第一显示区域，1≤j≤N。

综上所述，本公开提供的显示方法，通过将N个显示图像并列显示，N个显示图像中包括一个处于展开状态的显示图像和N-1个处于重叠状态的显示图像，N为正整数，当N个显示图像中的第i个显示图像处于展开状态时，在与第i个显示图像对应的第一显示区域内对第i个显示图像的全部内容进行显示，1≤i≤N，当N个显示图像中的第j个显示图像处于重叠状态时，在与第j个显示图像对应的第二显示区域内对第j个显示图像中的视觉焦点内容进行显示，第二显示区域小于第一显示区域，1≤j≤N；解决了当终端的浏览器使用平铺的方式显示大量照片时，占据很大的页面空间的问题；达到了将没有被查看的显示图像重叠，只在较小的显示区域内显示视觉焦点内容，既不影响用户浏览，又节约了页面空间的效果。

图2是根据一示例性实施例示出的一种显示方法的流程图，本实施例以该显示方式用于上述终端设备中来举例说明，该方法可以包括以下几个步骤：

在步骤201中，将N个显示图像并列显示，N个显示图像中包括一个处于展开状态的显示图像和N-1个处于重叠状态的显示图像，N为正整数。

可选的，N个显示图像在水平方向上并列显示或者，在垂直方向上并列显示，本实施例对N的取值不作限定，以及，对N显示图像在并列显示时的显示效果不作限定。

可选的，当显示图像处于展开状态时，显示图像显示全部内容；当显示图像处于重叠状态时，显示图像显示部分内容。

如图3A所示，其示出了N个显示图像在水平方向上并列显示的显示效果示意图，以N为4进行说明，4个显示图像并列显示的显示效果示意图305中，第1个显示图像301处于展开状态，第2个显示图像302、第3个显示图像303和第4个显示图像304处于重叠状态。

如图3B所示，其示出了显示图像301、显示图像302、显示图像303和显示图像304在垂直方向上并列显示时的显示效果示意图306。

本实施例中，以N个显示图像在水平方向上并列显示为例。

在步骤202中，当N个显示图像中的第i个显示图像处于展开状态时，在与第i个显示图像对应的第一显示区域内对第i个显示图像的全部内容进行显示，1≤i≤N。

可选的，第i个显示图像是按照预定排列规则，在N个显示图像的排列顺序为第i个的显示图像，当N个显示图像在水平方向上排列时，第i个显示图像是从左至右第i个显示图像，或者，是从右至左第i个显示图像；当N个显示图像在垂直方向上排列时，第i个显示图像是从上至下第i个显示图像，或者，是从下至上第i个显示图像。第i个显示图像也可以不是通过排列顺序确定的，本实施例对此不作限定。

在本实施例中，以N个显示图像在水平方向上并列显示，且第i个显示图像是N个显示图像中从左至右第i个显示图像为例进行说明。

可选的，在默认状态下显示N个显示图像时，处于展开状态的是第i个显示图像，i的取值由系统预设或用户自定义，默认状态是用户打开N个显示图像所在的页面，没有进行操作时，N个显示图像的显示状态。

例如，页面1上有4个图像并列显示，由用户自定义在默认状态下，是第1个显示图像处于展开状态，则每次用户打开页面1，都是第21显示图像处于展开状态，如图3A所示。

在本实施例中，以在默认状态下处于展开状态的是第1个显示图像为例进行说明。

可选的，N个显示图像中，不同的显示图像对应的第一显示区域大小相同或者不同，本实施例不同的显示图像对应的第一显示区域的大小和位置不作限定，本实施例以不同的显示图像对应的第一显示区域大小均相同为例进行说明。

在步骤203中，当N个显示图像中的第j个显示图像处于重叠状态时，在与第j个显示图像对应的第二显示区域内对第j个显示图像中的视觉焦点内容进行显示，第二显示区域小于第一显示区域，1≤j≤N。

可选的，第j个显示图像的定义与第i个显示图像的定义相同，在本实施例中，以N个显示图像在水平方向上并列显示为例，且第j个显示图像是N个显示图像中从左至右第j个显示图像，j≠i。

可选的，视觉焦点内容是第j个显示图像由系统预设或用户自定义的需要突出显示的内容，比如，视觉焦点内容可以是第j个显示图像中的人物内容，本实施例对视觉焦点内容不作限定。

可选的，N个显示图像中，不同的显示图像对应的第二显示区域的大小相同或者不同，本实施例不同的显示图像对应的第一显示区域的大小和位置不作限定，本实施例以不同的显示图像对应的第二显示区域的大小均相同为例进行说明。

在步骤204中，接收触发信息。

可选的，触发信息由用户进行控制，触发信息是用户鼠标的位置信息、用户鼠标的点击操作信息、用户的触摸操作信息等，本实施例对触发信息不作限定。

可选的，触发信息由系统根据预定时间进行控制，当触发信息在第i个显示图像对应的第一显示区域内时，系统在预定时间后，将触发信息移入第i+1个显示图像对应的第二显示区域内，本实施例对预定时间不作限定。

在本实施例中，以触发信息由用户鼠标所在的位置进行确定为例，则当用户鼠标移入第j个显示图像对应的第二显示区域内时，第i个显示图像接收到触发信息。

在步骤205中，当第j个显示图像处于重叠状态，且触发信息位于与第j个显示图像对应的第二显示区域内时，将第j个显示图像从重叠状态切换至展开状态。

在步骤206中，当第i个显示图像处于展开状态，且触发信息位于与第i个显示图像对应的第一显示区域外时，将第i个显示图像从展开状态切换至重叠状态。

在一个示例性的例子中，4个显示图像并列显示的效果如图3A所示的显示效果示意图305，第1个显示图像处于展开状态，第2个显示图像处于重叠状态，触发信息是用户鼠标的位置信息，此时，用户鼠标在第1个显示图像对应的第一显示区域内，当用户控制鼠标位置移入第2个显示图像对应的第二显示区域内时，第1个显示图像从展开状态切换至重叠状态，第2个显示图像从重叠状态切换至展开状态，第3个显示图像和第4个显示图像仍在各自对应的第二显示区域内进行显示，如图4所示。

综上所述，本公开提供的显示方法，通过将N个显示图像并列显示，N个显示图像中包括一个处于展开状态的显示图像和N-1个处于重叠状态的显示图像，N为正整数，当N个显示图像中的第i个显示图像处于展开状态时，在与第i个显示图像对应的第一显示区域内对第i个显示图像的全部内容进行显示，1≤i≤N，当N个显示图像中的第j个显示图像处于重叠状态时，在与第j个显示图像对应的第二显示区域内对第j个显示图像中的视觉焦点内容进行显示，第二显示区域小于第一显示区域，1≤j≤N；解决了当终端的浏览器使用平铺的方式显示大量照片时，占据很大的页面空间的问题；达到了将没有被查看的显示图像重叠，只在较小的显示区域内显示视觉焦点内容，既不影响用户浏览，又节约了页面空间的效果。

在基于图2所示的实施例中，当第j个显示图像处于重叠状态时，将第j个显示图像中的视觉焦点内容进行显示包括如下步骤，如图5所示：

在步骤501中，确定第一位置信息，第一位置信息是第j个显示图像处于重叠状态时的默认显示位置的位置信息。

可选的，当N个显示图像在水平方向上并列显示时，第j个显示图像的默认显示位置是第j个显示图像的左边P个像素列，或者，右边P个像素列；当N个显示图像在垂直方向上并列显示时，第j个显示图像的默认显示位置是第j个显示图像的顶部Q个像素行，或者，底部Q个像素行，P和Q的取值由第j个显示图像对应的第二显示区域的大小决定，本实施例对此不作限定，本实施例以第j个显示图像的默认显示位置是第j个显示图像的左边P个像素列为例进行说明。

在一个示例性的例子中，以上图4所示的例子中的第1个显示图像301为例进行说明，如图6所示，第1个显示图像301包括300*500个像素，第1个显示图像301的默认显示位置601是从左至右第1列至第100列像素列，则第1个显示图像301在第二显示区域内显示第1列至第100列像素列包括的内容，即显示默认显示位置601。

在步骤502中，获取第j个显示图像中视觉焦点内容的第二位置信息。

可选的，第j个显示图像的视觉焦点内容的第二位置信息是在使用该显示图像时，与该显示图像一起获取到的，或者，由系统对第j个显示图像中的视觉焦点内容识别得到的，不同的显示图像中的视觉焦点内容的第二位置信息相同或者不同，本实施例对此不作限定。

在上述示例性的例子中，假设第1个显示图像301的第二位置信息是从左至右第121列至第220列像素列。

需要说明的是，步骤502和步骤501没有特定的先后关系。

在步骤503中，将第j个显示图像的显示位置的位置信息由第一位置信息修改为第二位置信息，当N个显示图像中的第j个显示图像处于重叠状态时，使第j个显示图像中的视觉焦点内容在第二显示区域内进行显示。

在上述示例性例子中，如图6所示，将第1个显示图像的显示位置的位置信息修改为第二位置信息，则当第1个显示图像处于重叠状态时，第1个显示图像根据第二位置信息在第二显示区域内显示从左至右第121列至第220列，即在第二显示区域内显示视觉焦点内容602。

综上所述，本公开实施例提供的显示方法，显示图像处于重叠状态时，在显示图像对应的第二显示区域内显示视觉焦点内容，达到了显示图像处于重叠时，将显示图像中重点的焦点内容进行显示，提高了每一个显示图像的辨识度，便于用户进行查看。

在基于上述实施例的其他可选实施例中，当第j个显示图像从重叠状态切换至展开状态的过程中，包括如下步骤，如图7所示：

在步骤701中，根据第一位置信息和第二位置信息确定位移信息。

在本实施例中，第一位置信息和第二位置信息和图5所示的实施例中的含义和确定方式相同，本实施例对此不作限定。

可选的，位移信息包括位移方向和位移距离，一个位移信息中包括一个或多个位移方向。

当第二位置信息在第一位置信息左侧时，位移方向是水平向左移动，当第二位置信息在第一位置信息右侧时，位移方向是水平向右移动；当第二位置信息在第一位置信息上方时，位移方向是竖直向上移动；当第二位置信息在第一位置信息下方时，位移方向是竖直向下移动。

在上述示例性例子中，第一位置信息是第1个显示图像从左至右第1列至第100列，第二位置信息是第1个显示图像从左至右第121列至第220列，则根据第一位置信息和第二位置信息确定位移信息是水平向右移动120个像素。

在步骤702中，在将第j个显示图像从重叠状态切换至展开状态时，根据位移信息移动第j个显示图像，使第j个显示图像在与第j个显示图像对应的第一显示区域内进行完整显示。

需要说明的是，当第j个显示图像从重叠状态切换至展开状态时，是按照预定动画展开方式对第j个显示图像进行展开的，该预定动画展开方式是针对默认显示位置设计的。换句话说，当第j个显示图像处于重叠状态，且在第二显示区域内显示默认显示位置时，第j个显示图像按照预定动画展开方式切换为展开状态后，第j个显示图像会在第一显示区域内进行完整显示；但当将第j个显示图像进行位移使视觉焦点内容在第二显示区域内显示后，将第j个显示图像按照预定展开方式切换为展开状态后，第j个显示图像无法在第一显示区域内进行完整显示。

在一个示例性的例子中，如图8所示，当第1个显示图像301处于重叠状态且在第二显示区域显示默认显示位置601时，将第1个显示图像通过预定动画展开方式切换成展开状态时，第1个显示图像在对应的第一显示区域内进行完整显示，如图8的显示效果801所示；当第1个显示图像301处于重叠状态且在第二显示区域显示视觉焦点内容602时，将第1个显示图像301通过预定动画展开方式切换成展开状态时，第1个显示图像301在对应的第一显示区域内显示部分内容，且第一显示区域内存在空白区域，如图8的显示效果802所示。

为了使得第j个图像能够在第一显示区域内完整显示，在将第j个显示图像通过预定动画展开方式从重叠状态切换至展开状态时，还需要根据位移信息对第j个显示图像进行移动。

在上述示例性例子中，将第1个显示图像301通过预定动画展开方式从重叠状态切换至展开状态时，如图8中显示效果802所示，在对应的第一显示区域内显示部分内容。当确定的位移信息是水平向右移动120个像素时，将第1个显示图像水平向右移动120个像素后，第1个显示图像在第一显示区域内进行完整显示，从而完成整个切换过程，如图8中显示效果801所示。

在基于上述实施例的其他可选实施例中，在根据位移信息移动第j个显示图像时，存在两种不同的实现方式：通过层叠样式表CSS3实现，或者，通过JavaScript实现，在本实施例中，通过CSS3移动第j个显示图像，包括如下步骤，如图9所示：

在步骤901中，将位移信息作为调用参数，调用CSS3的变形处理属性中的平移变换函数。

可选的，变形处理属性中的平移变换函数是transform:translate(x，y)，其中，x是水平方向上移动的距离，y是竖直方向上移动的距离，x大于0时表示水平向右移动，x小于0时表示水平向左移动，y大于0时表示竖直向上移动，y小于0时表示竖直向下移动。

在步骤902中，通过平移变换函数以过渡效果移动第j个显示图像。

可选的，本实施例对过渡效果的名称、过渡时长等参数不作限定。

综上所述，本公开实施例提供的显示方法，通过调用CSS3的变形处理属性中的平移变换函数，通过平移变换函数以过渡效果移动第j个显示图像，达到了通过过渡效果移动第j个显示图像使其在第一显示区域内进行完整显示，提高了切换过程的流畅性。

在基于上述实施例的其他可选实施例中，本实施例以通过JavaScript移动第j个显示图像为例进行说明，包括如下步骤，如图10所示：

在步骤1001中，通过JavaScript配置时间周期和移动参数，移动参数用于指示在一个时间周期内对第j个显示图像的位置属性进行移动的移动量。

可选的，移动参数包括移动方向和移动距离，移动参数的移动方向与位移信息的位移方向相同，移动参数的移动距离小于或等于位移信息的位移距离。

可选的，移动参数中包括一个或多个位移方向，在一个时间周期内，不同方向上对第j个显示图像的位置属性进行移动的移动距离相同或者不同。

在步骤1002中，根据位移信息和移动参数确定时间周期的个数。

可选的，在相同的的移动方向上，位移信息中的位移距离是移动参数中的移动距离的整数倍。

可选的，当位移信息和移动参数在一个方向上进对第j个显示图像的位置属性进行移动时，时间周期的个数＝位移信息中的位移距离/移动参数中的移动距离；当位移信息和移动参数在多个方向上进对第j个显示图像的位置属性进行移动时，时间周期的个数是每一个移动方向上的时间周期个数的总和。

例如，位移信息是水平向左移动100个像素，再垂直向上移动100个像素，移动参数是水平向左移动20个像素，再垂直向上移动50个像素，则时间周期的个数＝100/20+100/50＝7。

在步骤1003中，根据时间周期的个数对第j个显示图像的位置属性进行若干次移动。

在一个示例性的例子中，第1个显示图像的位移信息是水平向右移动120个像素，移动参数是水平向右移动40个像素，时间周期是10ms，则每隔10ms对第1个显示图像的位置属性向右移动40个像素，根据位移信息和移动参数确定时间周期的个数是3个，则对第1个显示图像的位置属性进行3次移动，在30ms后，将第1个显示图像在第一显示区域内进行完整显示，移动过程如图11所示。

综上所述，本公开实施例提供的显示方法，通过JavaScript配置时间周期和移动参数，对第j个显示图像的位置属性进行若干次移动，在更多浏览器中适用，达到了扩大适用范围的效果。

下述为本公开装置实施例，可以用于执行本公开方法实施例。对于本公开装置实施例中未披露的细节，请参照本公开方法实施例。

图12是根据一示例性实施例示出的一种显示装置的框图，该装置包括：

第一显示模块1210，用于将N个显示图像并列显示，N个显示图像中包括一个处于展开状态的显示图像和N-1个处于重叠状态的显示图像，N为正整数。

第二显示模块1220，用于当N个显示图像中的第i个显示图像处于展开状态时，在与第i个显示图像对应的第一显示区域内对第i个显示图像的全部内容进行显示，1≤i≤N。

第三显示模块1230，用于当N个显示图像中的第j个显示图像处于重叠状态时，在与第j个显示图像对应的第二显示区域内对第j个显示图像中的视觉焦点内容进行显示，第二显示区域小于第一显示区域，1≤j≤N。

综上所述，本公开提供的显示方法，通过将N个显示图像并列显示，N个显示图像中包括一个处于展开状态的显示图像和N-1个处于重叠状态的显示图像，N为正整数，当N个显示图像中的第i个显示图像处于展开状态时，在与第i个显示图像对应的第一显示区域内对第i个显示图像的全部内容进行显示，1≤i≤N，当N个显示图像中的第j个显示图像处于重叠状态时，在与第j个显示图像对应的第二显示区域内对第j个显示图像中的视觉焦点内容进行显示，第二显示区域小于第一显示区域，1≤j≤N；解决了当终端的浏览器使用平铺的方式显示大量照片时，占据很大的页面空间的问题；达到了将没有被查看的显示图像重叠，只在较小的显示区域内显示视觉焦点内容，既不影响用户浏览，又节约了页面空间的效果。

图13根据另一个示例性实施例示出的一种显示装置的框图，该装置包括：

第一显示模块1310，用于将N个显示图像并列显示，N个显示图像中包括一个处于展开状态的显示图像和N-1个处于重叠状态的显示图像，N为正整数。

第二显示模块1320，还用于当N个显示图像中的第i个显示图像处于展开状态时，在与第i个显示图像对应的第一显示区域内对第i个显示图像的全部内容进行显示，1≤i≤N。

第三显示模块1330，还用于当N个显示图像中的第j个显示图像处于重叠状态时，在与第j个显示图像对应的第二显示区域内对第j个显示图像中的视觉焦点内容进行显示，第二显示区域小于第一显示区域，1≤j≤N。

第三显示模块1330包括：

第一确定子模块1331，用于确定第一位置信息，第一位置信息是第j个显示图像处于重叠状态时的默认显示位置的位置信息。

获取子模块1332，用于获取第j个显示图像中视觉焦点内容的第二位置信息。

显示子模块1333，用于将第j个显示图像的显示位置的位置信息由第一位置信息修改为第二位置信息，当N个显示图像中的第j个显示图像处于重叠状态时，使第j个显示图像中的视觉焦点内容在第二显示区域内进行显示。

接收模块1340，用于接收触发信息。

第一处理模块1350，用于当第j个显示图像处于重叠状态，且触发信息位于与第j个显示图像对应的第二显示区域内时，将第j个显示图像从重叠状态切换至展开状态。

第一处理模块1350包括：

第三确定子模块1351，用于根据第一位置信息和第二位置信息确定位移信息。

第二处理子模块1352，用于在将第j个显示图像从重叠状态切换至展开状态时，根据位移信息移动第j个显示图像，使第j个显示图像在与第j个显示图像对应的第一显示区域内进行完整显示。

第二处理模块1360，用于当第i个显示图像处于展开状态，且触发信息位于与第i个显示图像对应的第一显示区域外时，将第i个显示图像从展开状态切换至重叠状态。

在一个可选的实施例中，如图14A所示，第二处理子模块1352包括：

调用子模块1410，用于将位移信息作为调用参数，调用CSS3的变形处理属性中的平移变换函数。

第一移动子模块1420，用于通过平移变换函数以过渡效果移动第j个显示图像。

在另一个可选的实施例中，如图14B所示，第二处理子模块1352包括：

配置子模块1430，用于通过JavaScript配置时间周期和移动参数，移动参数用于指示在一个时间周期内对第j个显示图像的位置属性进行移动的移动量。

第四确定子模块1440，用于根据位移信息和移动参数确定时间周期的个数。

第二移动子模块1450，用于根据时间周期的个数对第j个显示图像的位置属性进行若干次移动。

综上所述，本公开提供的显示方法，通过将N个显示图像并列显示，N个显示图像中包括一个处于展开状态的显示图像和N-1个处于重叠状态的显示图像，N为正整数，当N个显示图像中的第i个显示图像处于展开状态时，在与第i个显示图像对应的第一显示区域内对第i个显示图像的全部内容进行显示，1≤i≤N，当N个显示图像中的第j个显示图像处于重叠状态时，在与第j个显示图像对应的第二显示区域内对第j个显示图像中的视觉焦点内容进行显示，第二显示区域小于第一显示区域，1≤j≤N；解决了当终端的浏览器使用平铺的方式显示大量照片时，占据很大的页面空间的问题；达到了将没有被查看的显示图像重叠，只在较小的显示区域内显示视觉焦点内容，既不影响用户浏览，又节约了页面空间的效果。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (12)

1.一种显示方法，其特征在于，所述方法包括：

将N个显示图像并列显示，所述N个显示图像中包括一个处于展开状态的显示图像和N-1个处于重叠状态的显示图像，N为正整数；

当所述N个显示图像中的第i个显示图像处于所述展开状态时，在与所述第i个显示图像对应的第一显示区域内对所述第i个显示图像的全部内容进行显示，1≤i≤N；

当所述N个显示图像中的第j个显示图像处于所述重叠状态时，在与所述第j个显示图像对应的第二显示区域内对所述第j个显示图像中的视觉焦点内容进行显示，所述第二显示区域小于所述第一显示区域，1≤j≤N。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

接收触发信息；

当所述第j个显示图像处于所述重叠状态，且所述触发信息位于与所述第j个显示图像对应的所述第二显示区域内时，将所述第j个显示图像从所述重叠状态切换至所述展开状态；

当所述第i个显示图像处于所述展开状态，且所述触发信息位于与所述第i个显示图像对应的所述第一显示区域外时，将所述第i个显示图像从所述展开状态切换至所述重叠状态。

3.根据权利要求2所述的方法，其特征在于，所述当所述N个显示图像中的第j个显示图像处于所述重叠状态时，在第二显示区域内对所述第j个显示图像中的视觉焦点内容进行显示，包括：

确定第一位置信息，所述第一位置信息是所述第j个显示图像处于所述重叠状态时的默认显示位置的位置信息；

获取所述第j个显示图像中所述视觉焦点内容的第二位置信息；

将所述第j个显示图像的显示位置的位置信息由第一位置信息修改为第二位置信息，当所述N个显示图像中的第j个显示图像处于所述重叠状态时，使所述第j个显示图像中的所述视觉焦点内容在所述第二显示区域内进行显示。

4.根据权利要求3所述的方法，其特征在于，所述将所述第j个显示图像从所述重叠状态切换至所述展开状态，包括：

根据所述第一位置信息和所述第二位置信息确定位移信息；

在将所述第j个显示图像从所述重叠状态切换至所述展开状态时，根据所述位移信息移动所述第j个显示图像，使所述第j个显示图像在与所述第j个显示图像对应的第一显示区域内进行完整显示。

5.根据权利要求4所述的方法，其特征在于，所述根据所述位移信息移动所述第j个显示图像，包括：

将所述位移信息作为调用参数，调用层叠样式表CSS3的变形处理属性中的平移变换函数；

通过所述平移变换函数以过渡效果移动所述第j个显示图像。

6.根据权利要求4所述的方法，其特征在于，所述根据所述位移信息移动所述第j个显示图像，包括：

通过JavaScript配置时间周期和移动参数，所述移动参数用于指示在一个时间周期内对所述第j个显示图像的位置属性进行移动的移动量；

根据所述位移信息和所述移动参数确定所述时间周期的个数；

根据所述时间周期的个数对所述第j个显示图像的位置属性进行若干次移动。

7.一种显示装置，其特征在于，所述装置包括：

第一显示模块，用于将N个显示图像并列显示，所述N个显示图像中包括一个处于展开状态的显示图像和N-1个处于重叠状态的显示图像，N为正整数；

第二显示模块，用于当所述N个显示图像中的第i个显示图像处于所述展开状态时，在与所述第i个显示图像对应的第一显示区域内对所述第i个显示图像的全部内容进行显示，1≤i≤N；

第三显示模块，用于当所述N个显示图像中的第j个显示图像处于所述重叠状态时，在与所述第j个显示图像对应的第二显示区域内对所述第j个显示图像中的视觉焦点内容进行显示，所述第二显示区域小于所述第一显示区域，1≤j≤N。

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

接收模块，用于接收触发信息；

第一处理模块，用于当所述第j个显示图像处于所述重叠状态，且所述触发信息位于与所述第j个显示图像对应的所述第二显示区域内时，将所述第j个显示图像从所述重叠状态切换至所述展开状态；

第二处理模块，用于当所述第i个显示图像处于所述展开状态，且所述触发信息位于与所述第i个显示图像对应的所述第一显示区域外时，将所述第i个显示图像从所述展开状态切换至所述重叠状态。

9.根据权利要求8所述的装置，其特征在于，所述第三显示模块，包括：

第一确定子模块，用于确定第一位置信息，所述第一位置信息是所述第j个显示图像处于所述重叠状态时的默认显示位置的位置信息；

获取子模块，用于获取所述第j个显示图像中所述视觉焦点内容的第二位置信息；

显示子模块，用于将所述第j个显示图像的显示位置的位置信息由第一位置信息修改为第二位置信息，当所述N个显示图像中的第j个显示图像处于所述重叠状态时，使所述第j个显示图像中的所述视觉焦点内容在所述第二显示区域内进行显示。

10.根据权利要求9所述的装置，其特征在于，所述第一处理模块包括：

第三确定子模块，用于根据所述第一位置信息和所述第二位置信息确定位移信息；

第二处理子模块，用于在将所述第j个显示图像从所述重叠状态切换至所述展开状态时，根据所述位移信息移动所述第j个显示图像，使所述第j个显示图像在与所述第j个显示图像对应的第一显示区域内进行完整显示。

11.根据权利要求10所述的装置，其特征在于，所述第二处理子模块包括：调用子模块，用于将所述位移信息作为调用参数，调用层叠样式表CSS3的变形处理属性中的平移变换函数；

第一移动子模块，通过所述平移变换函数以过渡效果移动所述第j个显示图像。

12.根据权利要求10所述的装置，其特征在于，所述第二处理子模块包括：

配置子模块，用于通过JavaScript配置时间周期和移动参数，所述移动参数用于指示在一个时间周期内对所述第j个显示图像的位置属性进行移动的移动量；

第四确定子模块，用于根据所述位移信息和所述移动参数确定所述时间周期的个数；

第二移动子模块，用于根据所述时间周期的个数对所述第j个显示图像的位置属性进行若干次移动。