CN106406824A - 一种界面显示方法及装置 - Google Patents

Abstract

本申请提供了一种界面显示方法及装置，所述方法包括：获取来源于网页的目标图像；对所述目标图像进行模糊处理后得到模糊图像；在显示界面的控件区域显示所述模糊图像的第一部分图像，同时，在显示界面的网页区域显示所述模糊图像的第二部分图像；其中，所述控件区域与所述网页区域相接。本申请能够使控件区域和网页区域均采用同一图像作为背景，从而减小控件区域和网页区域两者之间的背景差异，进而使得用户在体验时无明显的割裂感。

Description

一种界面显示方法及装置

技术领域

本申请涉及自动化技术领域，尤其涉及一种界面显示方法及装置。

背景技术

目前，智能设备上安装有众多软件应用。在软件应用具体使用时，显示界面上可以有控件区域和显示网页的网页区域。其中，控件区域的显示内容为软件应用安装在智能设备上的客户端程序形成的，网页区域为客户端与服务器交互之后在服务器获取并显示在网页区域内的。由于网页区域和控件区域的实现方式不同，所以两者的背景具有严重差异。

参见图 1为一种小说的显示界面，该显示界面包含控件区域11和网页区域12。由图 1可以看出控件区域11的背景为一个图像，网页区域12的背景为另一图像。

由于网页区域和控件区域的背景具有严重差异，这导致用户在体验上有明显的割裂感。

发明内容

本申请提供了一种界面显示方法及装置，本申请能够降低控件区域和网页区域之间的背景差异，从而使得用户在体验时无明显的割裂感。

为了实现上述目的，本申请提供了以下技术手段：

一种界面显示方法，包括：

获取来源于网页的目标图像；

对所述目标图像进行模糊处理后得到模糊图像；

在显示界面的控件区域显示所述模糊图像的第一部分图像，同时，在显示界面的网页区域显示所述模糊图像的第二部分图像；

其中，所述控件区域与所述网页区域相接。

优选的，还包括：

确定所述控件区域的显示高度值；

将所述模糊图像的起始高度值确定为所述第一部分图像的第一起始高度值，并将所述第一起始高度值与所述显示高度值的和值确定为第一部分图像的第一结束高度值；

在所述模糊图像上，将所述第一起始高度值与所述第一结束高度值之间的图像，确定为所述第一部分图像。

优选的，还包括：

依据所述显示界面上的滑动距离和所述滑动方向，确定所述第一部分图像的最新第一起始高度值；

将所述最新第一起始高度与所述显示高度值的和值，确定为第一部分图像的最新第一结束高度值；

在所述模糊图像上，将所述最新第一起始高度值与最新第一结束高度值之间的图像，确定为最新第一部分图像；

在显示界面的控件区域显示所述最新第一部分图像。

优选的，所述依据所述显示界面上的滑动距离和所述滑动方向，确定所述第一部分图像的最新第一起始高度值，包括：

获取所述第一部分图像的原始第一起始高度值；

若所述滑动方向为向所述显示界面的底部滑动，则计算所述原始第一起始高度值减去所述滑动距离的第一差值；

若所述第一差值大于所述起始高度值，则将所述第一差值确定为所述最新第一起始高度值；若所述第一差值小于所述起始高度值，则将所述模糊图像的起始高度值，确定为所述最新第一起始高度值；

若所述滑动方向为向所述当前显示界面的顶部滑动，则计算所述原始第一起始高度值、所述滑动距离和所述显示高度值三者的第一和值；

若所述第一和值大于所述模糊图像的结束高度值，则将所述模糊图像的结束高度值减去所述显示高度值的第二差值，确定为所述最新第一起始高度值；若所述第一和值小于所述模糊图像的结束高度值，则将所述原始第一起始高度值和所述滑动距离的第二和值，确定为所述最新第一起始高度值。

优选的，还包括：

确定所述控件区域的显示高度值；

将所述模糊图像的起始高度值与显示高度值的和值确定为所述第二部分图像的第二起始高度值，并将所述模糊图像的结束高度值确定为第二部分图像的第二结束高度值；

在所述模糊图像上，将所述第二起始高度值与所述第二结束高度值之间的图像，确定为所述第二部分图像。

优选的，还包括：

依据所述显示界面上的滑动距离和所述滑动方向，确定所述第二部分图像的最新第二起始高度值；

将所述模糊图像的结束高度值确定为最新第二结束高度值；

在所述模糊图像上，将所述最新第二起始高度值与所述最新第二结束高度值之间的图像，确定为最新第二部分图像。

优选的，依据所述显示界面上的滑动距离和所述滑动方向，确定所述第二部分图像的最新第二起始高度值，包括：

获取所述第二部分图像的原始第二起始高度值；

若所述滑动方向为向所述显示界面的底部滑动，则计算所述原始第二起始高度值减去所述滑动距离的第三差值；

若所述第三差值大于所述显示高度值，则将所述第三差值确定为所述最新第二起始高度值；若所述第三差值小于所述显示高度值，则将所述显示高度值确定为所述最新第二起始高度值；

若所述滑动方向为向所述显示界面的顶部滑动，则计算所述原始第二起始高度值与所述滑动距离的第三和值；

若所述第三和值大于所述模糊图像的结束高度值，则将所述模糊图像的结束高度值确定为所述最新第二起始高度值；若所述第三和值小于所述模糊图像的结束高度值，则将所述第三和值确定为所述最新第二起始高度值。

一种界面显示装置，包括：

第一获取单元，用于获取来源于网页的目标图像；

处理单元，用于对所述目标图像进行模糊处理后得到模糊图像；

显示单元，用于在显示界面的控件区域显示所述模糊图像的第一部分图像，同时，在显示界面的网页区域显示所述模糊图像的第二部分图像；

其中，所述控件区域与所述网页区域相接。

优选的，还包括：

第一部分图像确定单元，用于确定所述控件区域的显示高度值；将所述模糊图像的起始高度值确定为所述第一部分图像的第一起始高度值；将所述第一起始高度值与所述显示高度值的和值确定为第一部分图像的第一结束高度值；在所述模糊图像上，将所述第一起始高度值与所述第一结束高度值之间的图像，确定为所述第一部分图像。

优选的，还包括：

第一起始高度值确定单元，用于依据所述显示界面上的滑动距离和所述滑动方向，确定所述第一部分图像的最新第一起始高度值；

第一结束高度值确定单元，用于将所述最新第一起始高度与所述显示高度值的和值，确定为第一部分图像的最新第一结束高度值；

确定第一部分图像单元，用于在所述模糊图像上，将所述最新第一起始高度值与最新第一结束高度值之间的图像，确定为最新第一部分图像；

第一部分图像显示单元，用于在显示界面的控件区域显示所述最新第一部分图像。

优选的，所述第一起始高度值确定单元，包括：

第二获取单元，用于获取所述第一部分图像的原始第一起始高度值；

第一计算单元，用于若所述滑动方向为向所述显示界面的底部滑动，则计算所述原始第一起始高度值减去所述滑动距离的第一差值；若所述第一差值大于所述起始高度值，则将所述第一差值确定为所述最新第一起始高度值；若所述第一差值小于所述起始高度值，则将所述模糊图像的起始高度值，确定为所述最新第一起始高度值；

第二计算单元，用于若所述滑动方向为向所述当前显示界面的顶部滑动，则计算所述原始第一起始高度值、所述滑动距离和所述显示高度值三者的第一和值；若所述第一和值大于所述模糊图像的结束高度值，则将所述模糊图像的结束高度值减去所述显示高度值的第二差值，确定为所述最新第一起始高度值；若所述第一和值小于所述模糊图像的结束高度值，则将所述原始第一起始高度值和所述滑动距离的第二和值，确定为所述最新第一起始高度值。

优选的，还包括：

第二部分图像确定单元，用于确定所述控件区域的显示高度值；将所述模糊图像的起始高度值与显示高度值的和值确定为所述第二部分图像的第二起始高度值，并将所述模糊图像的结束高度值确定为第二部分图像的第二结束高度值；在所述模糊图像上，将所述第二起始高度值与所述第二结束高度值之间的图像，确定为所述第二部分图像。

优选的，还包括：

第二起始高度值确定单元，用于依据所述显示界面上的滑动距离和所述滑动方向，确定所述第二部分图像的最新第二起始高度值；

第二结束高度值确定单元，用于将所述模糊图像的结束高度值确定为最新第二结束高度值；

确定第二部分图像单元，用于在所述模糊图像上，将所述最新第二起始高度值与所述最新第二结束高度值之间的图像，确定为最新第二部分图像。

优选的，所述第二起始高度值确定单元，包括：

第三获取单元，用于获取所述第二部分图像的原始第二起始高度值；

第三计算单元，用于若所述滑动方向为向所述显示界面的底部滑动，则计算所述原始第二起始高度值减去所述滑动距离的第三差值；若所述第三差值大于所述显示高度值，则将所述第三差值确定为所述最新第二起始高度值；若所述第三差值小于所述显示高度值，则将所述显示高度值确定为所述最新第二起始高度值；

第四计算单元，用于若所述滑动方向为向所述显示界面的顶部滑动，则计算所述原始第二起始高度值与所述滑动距离的第三和值；若所述第三和值大于所述模糊图像的结束高度值，则将所述模糊图像的结束高度值确定为所述最新第二起始高度值；若所述第三和值小于所述模糊图像的结束高度值，则将所述第三和值确定为所述最新第二起始高度值。

经过上述技术手段，可以实现以下有益效果：

本申请实施例中，在控件区域显示模糊图像的第一部分图像，同时，在网页区域显示模糊图像的第二部分图像。即：本申请能够使控件区域和网页区域均采用同一图像作为背景，从而减小控件区域和网页区域两者之间的背景差异，进而使得用户在体验时无明显的割裂感。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图 1为现有技术的显示界面的示意图；

图 2为本申请实施例公开的界面显示方法的流程图；

图 3a-3c为本申请实施例公开的界面显示方法中网页区域和网页区域的示意图；

图 4为本申请实施例公开的界面显示方法中确定第一部分图像的流程图；

图 5为本申请实施例公开的界面显示方法中模糊图像的示意图；

图 6为本申请实施例公开的界面显示方法中确定第二部分图像的流程图；

图 7为本申请实施例公开的界面显示方法中确定最新第一部分图像的流程图；

图 8为本申请实施例公开的界面显示方法中确定最新第一起始高度值的流程图；

图 9为本申请实施例公开的界面显示方法中确定最新第二部分图像的流程图；

图 10为本申请实施例公开的界面显示方法中确定最新第二起始高度值的流程图；

图 11为本申请实施例公开的界面显示装置的结构示意图；

图 12为本申请实施例公开的又一界面显示装置的结构示意图；

图 13为本申请实施例公开的界面显示装置中更新第一部分图像的结构示意图；

图 14为本申请实施例公开的界面显示装置中第一起始高度值确定单元的结构示意图；

图 15为本申请实施例公开的界面显示装置中更新第二部分图像的结构示意图；

图 16为本申请实施例公开的界面显示装置中第二起始高度值确定单元的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请提供了一种界面显示方法，应用于终端的控制器。如图 2所示，具体包括步骤S201-S204：

步骤S201：获取来源于网页的目标图像。

与网页区域对应的网页上有许多图像，控制器在网页上获取一幅图像作为目标图像。目标图像的目的在于：将目标图像同时作为网页区域和控件区域的背景图像，从而降低网页区域和控件区域的背景差异。

步骤S202：对所述目标图像进行模糊处理后得到模糊图像。

本实施例对目标图像进行模糊处理的目的有两个：

第一个目的：获得与目标图像对应的模糊图像。

由于控件区域和网页区域需要向用户展示显示界面的正常内容。如图 3a所示，为直接采用目标图像作为控件区域和网页区域的背景图像的示意图。由图示可看出，控件区域和网页区域的背景图像过于明显，这会影响用户查看控件区域和网页区域的正常内容。

鉴于此，本申请对目标图像进行模糊处理得到模糊图像。模糊处理的方式可以为高斯模糊处理，当然还可以是其它模糊处理方式，在此不再一一列举。

模糊图像仅保留目标图像的大体轮廓，在模糊图像上目标图像的颜色和内容均会产生模糊效果。如图 3b所示，为采用模糊图像作为控件区域和网页区域的背景图像的示意图。由图 3b可以看出，使用模糊图像作为控件区域和网页区域的背景图像，可以不影响用户查看控件区域和网页区域的正常内容。

第二个目的：获得与预设高度值和屏幕宽度值匹配的模糊图像。

由于目标图像的宽度值一般小于终端的屏幕宽度值，若直接将与目标图像同等宽度的模糊图像作为控件区域和网页区域的背景图像，则呈现至用户 的效果如图 3a或图 3b所示。由图示可以看出，模糊图像仅占据网页区域和控件区域的部分空间而非全部空间，这导致用户在使用时体验较差。

为此，在对目标图像进行模糊处理的同时，加入变更图像大小的计算，使得最终得到的模糊图像与屏幕宽度值相同，并且具有预设高度值。其中，模糊图像的预设高度值可以为：控件区域的高度值和网页区域的高度值的和值。

如图 3c所示，为采用与屏幕宽度值一致且具有预设高度值的模糊图像，作为控件区域和网页区域的背景图像的示意图。由图 3c可以看出，背景图像能够占据网页区域和控件区域的整体宽度和整体高度，即背景图像占据网页区域和空间区域的全部空间，所以该种显示效果可以明显提升用户感受。

步骤S203：在显示界面的控件区域显示所述模糊图像的第一部分图像，同时，在显示界面的网页区域显示所述模糊图像的第二部分图像。

在显示界面上，所述控件区域位于所述网页区域的上方，且，所述控件区域与所述网页区域相接；即控件区域和网页区域相互贴合。

为了减小控件区域和网页区域的背景差异，控制器在控件区域显示所述模糊图像的第一部分图像，同时，在网页区域显示模糊图像的第二部分图像。这样可以使得控件区域和网页区域均能够将模糊图像作为背景图像，进而降低控件区域和网页区域的背景差异。

其中，第一部分图像和第二部分图像可以为模糊图像上同一位置的图像，当然也可以是模糊图像上不同位置的图像。优选的情况下，第一部分图像和第二部分图像可拼接成目标图像的全部图像；即第一部分图像和第二部分图像在拼接之后可以展现出完整的目标图像；换言之，第一部分图像和第二部分图像可以实现无缝结合。

下面分别针对本步骤进行进一步说明：

首先介绍在控件区域显示第一部分图像的具体过程。如图 4所示，包括步骤S401-S403：

步骤S401：确定所述控件区域的显示高度值。

步骤S402：将所述模糊图像的起始高度值确定为所述第一部分图像的第一起始高度值，并将所述第一起始高度与所述显示高度值的和值确定为所述第一部分图像的第一结束高度值。

参见图 5，假设模糊图像的起始高度值为0，结束高度值为H；控件区域的显示高度值为h。在起始时刻，控制器将模糊图像的起始高度值0作为第一部分图像的第一起始高度值，并将控件区域的显示高度值h作为第一部分图像的第一结束高度值。

步骤S403：在所述模糊图像上，将所述第一起始高度值与所述第一结束高度值之间的图像，确定为所述第一部分图像。

控制器将模糊图像上0-h之间的图像，确定为第一部分图像。由于第一部分图像的大小与控件区域的大小一致，所以便可以在控件区域显示第一部分图像。

采用上述图 4所示的实施例，可实现对控件区域添加背景图像的目的。然后介绍所述网页区域显示模糊图像的第二部分图像的具体执行过程。如图 6所示，具体包括步骤S601-S603：

步骤S601：确定所述控件区域的显示高度值。

步骤S602：将所述模糊图像的起始高度值和所述显示高度值的和值确定为所述第二部分图像的第二起始高度值，并将所述模糊图像的结束高度值确定为第二部分图像的第二结束高度值。

参见图 5所示，为了实现控件区域和网页区域的无缝结合的目的，将模糊图像的起始高度值0和显示高度值h的和值(h)作为第二部分图像的第二起始高度值，将模糊图像的结束高度值H作为第二结束高度值。

步骤S603：在所述模糊图像上，将所述第二起始高度值与所述第二结束高度值之间的图像，确定为所述第二部分图像。

由于第二部分图像的大小与网页区域的大小一致，所以直接在网页区域显示第二部分图像。在图 6所示的实施例结束后便可实现对网页区域添加背景图像的目的。

在图 2所示的实施例中，在控件区域显示模糊图像的第一部分图像，同时，在网页区域显示模糊图像的第二部分图像。即：本申请能够使控件区域和网页区域均采用同一图像作为背景，从而减小控件区域和网页区域两者之间的背景差异，使得用户在体验时无明显的割裂感。

此外，当第一部分图像和第二部分图像拼接为目标图像后，可以实现控件区域和网页区域的背景图像无缝结合的目的，从而进一步提升用户体验。

上述过程为在控件区域和网页区域显示背景图像的过程。当用户在显示界面上执行上、下滑动操作时，网页区域的显示内容会随之发生改变。如果在控件区域显示的第一部分图像和在网页区域显示的第二部分图像不发生改变，则控件区域和网页区域的背景图像则无法实现无缝结合的效果。为此，本申请提供更新第一部分图像和第二部分图像的技术手段：

如图 7所示，为了实现控件区域和网页区域的背景图像无缝结合的目的，在用户在网页上进行上下滑动时，控件区域可以随着滑动方向更新第一部分图像；具体执行步骤为S701-S704：

步骤S701：依据所述显示界面上的滑动距离和滑动方向，确定所述第一部分图像的最新第一起始高度值。

如图 8所示，本步骤在具体实现时可以采用如下步骤S801-S810：

步骤S801：获取所述第一部分图像的原始第一起始高度值。

设控件区域显示的第一部分图像在滑动前最近一次的起始高度为原始第一起始高度。假设原始第一起始高度值为n，且0＜n＜H-h；在模糊图像上n至(n+h)之间图像为第一部分图像。

步骤S802：确定滑动方向；若所述滑动方向为向所述显示界面的底部滑动，则进入步骤S803；若所述滑动方向为向所述显示界面的顶部滑动，则进入步骤S807。

当用户在网页上滑动方向为向显示界面的底部滑动时，说明网页区域需要显示模糊图像上在原始第二部分图像上方的图像。为了达到控件区域和网页区域无缝结合的目的，控件区域也需要显示模糊图像上在原始第一部分图像上方的图像，以便第一部分图像和第二部分图像同步移动；此时进入步骤S803具体确定更新后的第一部分图像。

当用户在网页上滑动方向为向显示界面的顶部滑动时，说明网页区域需要显示模糊图像上在原始第二部分图像下方的图像；为了达到控件区域和网页区域无缝结合的目的，控件区域也需要显示模糊图像上在原始第一部分图像下方的图像，以便第一部分图像和第二部分图像同步移动；此时进入步骤S807具体确定更新后的第一部分图像。

步骤S803：计算所述原始第一起始高度值减去所述滑动距离的第一差值，即：若所述滑动方向为向所述显示界面的底部滑动，则计算所述原始第一起始高度值减去所述滑动距离的第一差值。

在滑动方向为向所述显示界面的底部滑动时，控件区域也需要显示模糊图像上在原始第一部分图像上方的图像，模糊图像上方的图像越接近模糊图像的起始高度值，即控件区域的原始第一起始高度值n需要向模糊图像的起始高度值0靠近。

由于第一部分图像的第一起始高度值的最小高度值即为模糊图像的起始高度值0，所以需要计算原始第一起始高度值n减去滑动距离d的第一差值C1。然后，进入步骤S804，判断第一差值C1与起始高度值0的大小。

步骤S804：判断第一差值是否大于起始高度值；若是，则进入步骤S805，否则进入步骤S806。

步骤S805：将所述第一差值确定为所述最新第一起始高度值，即若所述第一差值大于起始高度值0，则将所述第一差值确定为所述最新第一起始高度值。

若原始第一起始高度值n减去滑动距离d的第一差值C1大于起始高度值0，则说明原始第一部分图像下移滑动距离d之后，得到更新后第一部分图像的最新第一起始高度值未达到第一部分图像的第一起始高度值的最小高度值0。所以此时将第一差值C1作为更新后第一部分图像的最新第一起始高度值。

步骤S806：将所述模糊图像的起始高度值确定为所述最新第一起始高度值；即若所述第一差值小于起始高度值，则将所述模糊图像的起始高度值，确定为所述最新第一起始高度值。

若原始第一起始高度值n减去滑动距离d的第一差值C1小于0，则说明原始第一部分图像下移滑动距离d之后，得到更新后第一部分图像的第一起始高度值已达到第一部分图像的最小高度值0；所以此时将模糊图像的起始高度值0作为最新第一起始高度值。

步骤S807：计算所述原始第一起始高度值、所述滑动距离和所述显示高度值三者的第一和值；即若所述滑动方向为向所述显示界面的顶部滑动，则计算所述原始第一起始高度值、所述滑动距离和所述显示高度值三者的第一和值。

在滑动方向为向所述显示界面的顶部滑动时，控件区域也需要显示模糊图像上在原始第一部分图像下方的图像，即控件区域的原始第一结束高度值n+h需要向第一部分图像的第一结束高度的最大值H靠近。

为了判断滑动距离是否超出第一结束高度值的最大值H，因此需要计算原始第一起始高度值n、滑动距离d和高度值h的第一和值A1(即第一结束高度值)。然后，进入步骤S808，判断第一和值A1与第一结束高度值的最大值H的大小。

步骤S808：判断所述第一和值是否大于模糊图像的结束高度值；若大于进入步骤S809，否则进入步骤S810。

步骤S809：若所述第一和值大于所述结束高度值，则将所述结束高度值减去所述显示高度值的第二差值，确定为所述最新第一起始高度值。

若第一和值A1大于第一结束高度值的最大值H，则说明第一部分图像下移滑动距离d之后，得到更新后第一部分图像的第一起始高度值已超过第一部分图像第一起始高度值的最大值H-h；所以，此时第一部分图像第一起始高度值的最大值H-h作为最新第二起始高度值。

步骤S810：若所述第一和值小于所述结束高度值，则将所述原始第一起始高度值和所述滑动距离的第二和值，确定为所述最新第一起始高度值。

若第一和值A1小于第一结束高度值的最大值H，则第一部分图像下移滑动距离d之后，得到的更新后第二起始高度值未达到第一部分图像第一起始高度的最大高度值H-h。因此，此时将所述原始第二起始高度值n和所述滑动距离d的第二和值A2，作为最新第二起始高度值。

接着返回图 7，进入步骤S702：将所述最新第一起始高度值与所述显示高度值的和值，确定为第一部分图像的最新第一结束高度值。

步骤S703：在所述模糊图像上，将所述最新第一起始高度值与最新第一结束高度值之间的图像，确定为最新第一部分图像。

步骤S704：在显示界面的控件区域显示所述最新第一部分图像。

由于控件区域的显示高度值是一定的，在重新确定最新第一起始高度值之后，便可确定最新第一结束高度值，从而在模糊图像上确定第一部分图像。

图 7所示的实施例为确定控件区域更新后的第一部分图像过程，下面介绍确定网页区域更新后第二部分图像的具体过程。如图 9所示，具体执行步骤为S901-S904：

步骤S901：依据所述显示界面上的滑动距离和滑动方向，确定所述第二部分图像的最新第二起始高度值。

如图 10所示，本步骤在具体执行时包括步骤S1001-S1010：

步骤S1001：获取所述第二部分图像的原始第二起始高度值。

首先，确定第二部分图像的原始第二起始高度值，后续的处理过程均依据原始第二起始高度值来进行。原始第二起始高度值为显示界面滑动前的第二部分图像的第二起始高度。假设网页区域的原始第二起始高度值为h，第二起始高度值的范围为h＜m＜H，且m至H之间为第二部分图像。

步骤S1002：确定滑动方向；若所述滑动方向为向所述显示界面的底部滑动，则进入步骤S1003；若所述滑动方向为向所述显示界面的顶部滑动，则进入步骤S1007。

其次，确定用户在显示界面上执行的滑动方向，具体包括两种方向：向所述显示界面的底部滑动和向所述显示界面的顶部滑动；不同的滑动方向决定后续不同的执行步骤。

当滑动方向为向所述显示界面的底部滑动时，说明网页区域需要显示模糊图像上在原始第二部分图像上方的图像；即第二起始高度值m需要向显示高度值h靠近。此时进入步骤S1003具体确定最新的第二部分图像。

当滑动方向为向所述显示界面的顶部滑动时，说明网页区域需要显示模糊图像上在原始第二部分图像下方的图像；即第二起始高度值m需要向H靠近。此时进入步骤S1007具体确定最新的第二部分图像。

步骤S1003：计算所述原始第二起始高度值减去所述滑动距离的第三差值；即若所述滑动方向为向所述显示界面的底部滑动，则计算所述原始第二起始高度值减去所述滑动距离的第三差值。

假设滑动距离为d，在滑动方向为向所述显示界面的底部滑动时，第二起始高度值m需要向h靠近。由于第二部分图像的最小高度值为高度值h。所以需要计算原始第二起始高度值m减去滑动距离d的第三差值C3。然后，进入步骤S1004，判断第三差值C3与高度值h的大小。

步骤S1004：判断所述第三差值是否大于所述显示高度值；若是，则进入步骤S1005，否则进入步骤S1006。

步骤S1005：将所述第三差值确定为所述最新第二起始高度值，即：若所述第三差值大于所述显示高度值，则将所述第三差值确定为所述最新第二起始高度值。

若第三差值C3大于高度值h，则说明移动滑动距离d之后，得到的最新第二起始高度值未达到第二部分图像第二起始高度值的最小值h。所以此时将第三差值C3作为最新第二起始高度值。

步骤S1006：将所述显示高度值确定为所述最新第二起始高度值，即若所述第三差值小于所述显示高度值，则将所述显示高度值确定为所述最新第二起始高度值。

若第三差值C3小于显示高度值h，则说明移动滑动距离之后，得到的最新第二起始高度值为已经小于第二部分图像的最小高度值h。所以此时将显示高度值h作为最新第二起始高度值。

步骤S1007：计算所述原始第二起始高度值与所述滑动距离的第三和值；即：若所述滑动方向为向所述显示界面的顶部滑动，则计算所述原始第二起始高度值与所述滑动距离的第三和值。

在滑动方向为向所述显示界面的顶部滑动时，说明第二起始高度值m需要向H靠近。由于第二部分图像的最大高度值为模糊图像结束高度值H。所以需要计算原始第二起始高度值m加上滑动距离d的第三和值A3。然后，进入步骤S1008，判断第三和值A3与模糊图像高度值H的大小。

步骤S1008：判断所述第三和值是否大于模糊图像的结束高度值；若大于，则进入步骤S1009；若小于，则进入步骤S1010。

步骤S1009：将所述模糊图像的结束高度值确定为所述最新第二起始高度值，即若所述第三和值大于所述模糊图像的结束高度值，则将所述模糊图像的结束高度值确定为所述最新第二起始高度值。

若第三和值A3大于模糊图像的结束高度值H，则说明移动滑动距离之后得到的最新第二起始高度值为超过第二部分图像的最大高度值H。所以此时将模糊图像的结束高度值H作为最新第二起始高度值。

步骤S1010：将所述第三和值确定为所述最新第二起始高度值，即：若所述第三和值小于所述模糊图像的高度值，则将所述第三和值确定为所述最新第二起始高度值。

若第三和值A3小于模糊图像高度值H，则说明移动滑动距离d之后，得到的最新第二起始高度值为未超过第二部分图像的最大高度值H。所以此时将第三和值A3作为最新第二起始高度值。

接着返回图 9，进入步骤S902：将所述模糊图像的结束高度值确定为最新第二结束高度值。

步骤S903：在所述模糊图像上，将所述最新第二起始高度值与所述最新第二结束高度值之间的图像，确定为最新第二部分图像。

步骤S904：在显示界面的网页区域显示所述最新第二部分图像。

本实施例中重新确定第二部分图像的最新第二起始高度值和最新第二结束高度值，便可确定能够实现控件区域和网页区域能够无缝结合的最新的第二部分图像。

在执行上述图 7和图 9所示的实施例之后，便可确定最新第一部分图像和最新第二部分图像，以使得在显示界面滑动后，第一部分图像和第二部分图像还可以一直维持无缝结合的效果。

如图 11所示，本申请还提供了一种界面显示装置，包括：

第一获取单元111，用于获取来源于网页的目标图像；

处理单元112，用于对所述目标图像进行模糊处理后得到模糊图像；

显示单元113，用于在显示界面的控件区域显示所述模糊图像的第一部分图像，同时，在显示界面的网页区域显示所述模糊图像的第二部分图像；

其中，所述控件区域与所述网页区域相接。

如图 12所示，本申请提供的界面显示装置，还包括：

第一部分图像确定单元114，用于确定所述控件区域的显示高度值；将所述模糊图像的起始高度值确定为所述第一部分图像的第一起始高度值；将所述第一起始高度值与所述显示高度值的和值确定为第一部分图像的第一结束高度值；在所述模糊图像上，将所述第一起始高度值与所述第一结束高度值之间的图像，确定为所述第一部分图像。

第二部分图像确定单元115，用于确定所述控件区域的显示高度值；将所述模糊图像的起始高度值与显示高度值的和值确定为所述第二部分图像的第二起始高度值，并将所述模糊图像的结束高度值确定为第二部分图像的第二结束高度值；在所述模糊图像上，将所述第二起始高度值与所述第二结束高度值之间的图像，确定为所述第二部分图像。

为了实现第一部分图像和第二部分图像无缝结合的目的，本申请所提供的界面显示装置，还包括更新第一部分图像和第二部分图像的内容。

针对更新第一部分图像，如图 13所示，本申请提供的界面显示装置还包括：

第一起始高度值确定单元1301，用于依据所述显示界面上的滑动距离和所述滑动方向，确定所述第一部分图像的最新第一起始高度值；

第一结束高度值确定单元1302，用于将所述最新第一起始高度与所述显示高度值的和值，确定为第一部分图像的最新第一结束高度值；

确定第一部分图像单元1303，用于在所述模糊图像上，将所述最新第一起始高度值与最新第一结束高度值之间的图像，确定为最新第一部分图像；

第一部分图像显示单元1304，用于在显示界面的控件区域显示所述最新第一部分图像。

其中，如图 14所示，所述第一起始高度值确定单元1301，包括：

第二获取单元1401，用于获取所述第一部分图像的原始第一起始高度值；

第一计算单元1402，用于若所述滑动方向为向所述显示界面的底部滑动，则计算所述原始第一起始高度值减去所述滑动距离的第一差值；若所述第一差值大于所述起始高度值，则将所述第一差值确定为所述最新第一起始高度值；若所述第一差值小于所述起始高度值，则将所述模糊图像的起始高度值，确定为所述最新第一起始高度值；

第二计算单元1403，用于若所述滑动方向为向所述当前显示界面的顶部滑动，则计算所述原始第一起始高度值、所述滑动距离和所述显示高度值三者的第一和值；若所述第一和值大于所述模糊图像的结束高度值，则将所述模糊图像的结束高度值减去所述显示高度值的第二差值，确定为所述最新第一起始高度值；若所述第一和值小于所述模糊图像的结束高度值，则将所述 原始第一起始高度值和所述滑动距离的第二和值，确定为所述最新第一起始高度值。

针对更新第二部分图像，如图 15所示，本申请提供的界面显示装置还包括：

第二起始高度值确定单元1501，用于依据所述显示界面上的滑动距离和所述滑动方向，确定所述第二部分图像的最新第二起始高度值；

第二结束高度值确定单元1502，用于将所述模糊图像的结束高度值确定为最新第二结束高度值；

确定第二部分图像单元1503，用于在所述模糊图像上，将所述最新第二起始高度值与所述最新第二结束高度值之间的图像，确定为最新第二部分图像。

其中，如图 16所示，所述第二起始高度值确定单元1501，包括：

第三获取单元1601，用于获取所述第二部分图像的原始第二起始高度值；

第三计算单元1602，用于若所述滑动方向为向所述显示界面的底部滑动，则计算所述原始第二起始高度值减去所述滑动距离的第三差值；若所述第三差值大于所述显示高度值，则将所述第三差值确定为所述最新第二起始高度值；若所述第三差值小于所述显示高度值，则将所述显示高度值确定为所述最新第二起始高度值；

第四计算单元1603，用于若所述滑动方向为向所述显示界面的顶部滑动，则计算所述原始第二起始高度值与所述滑动距离的第三和值；若所述第三和值大于所述模糊图像的结束高度值，则将所述模糊图像的结束高度值确定为所述最新第二起始高度值；若所述第三和值小于所述模糊图像的结束高度值，则将所述第三和值确定为所述最新第二起始高度值。

本申请实施例中，在控件区域显示模糊图像的第一部分图像，同时，在网页区域显示模糊图像的第二部分图像。即：本申请能够使控件区域和网页区域均采用同一图像作为背景，从而减小控件区域和网页区域两者之间的背景差异，进而使得用户在体验时无明显的割裂感。

本实施例方法所述的功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算设备可读取存储介质中。基于这样的理解，本申请实施例对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该软件产品存储在一个存储介质中，包括若干指令用以使得一台计算设备(可以是个人计算机，服务器，移动计算设备或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (14)

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

获取来源于网页的目标图像；

对所述目标图像进行模糊处理后得到模糊图像；

在显示界面的控件区域显示所述模糊图像的第一部分图像，同时，在显示界面的网页区域显示所述模糊图像的第二部分图像；

其中，所述控件区域与所述网页区域相接。

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

确定所述控件区域的显示高度值；

将所述模糊图像的起始高度值确定为所述第一部分图像的第一起始高度值，并将所述第一起始高度值与所述显示高度值的和值确定为第一部分图像的第一结束高度值；

在所述模糊图像上，将所述第一起始高度值与所述第一结束高度值之间的图像，确定为所述第一部分图像。

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

依据所述显示界面上的滑动距离和所述滑动方向，确定所述第一部分图像的最新第一起始高度值；

将所述最新第一起始高度与所述显示高度值的和值，确定为第一部分图像的最新第一结束高度值；

在所述模糊图像上，将所述最新第一起始高度值与最新第一结束高度值之间的图像，确定为最新第一部分图像；

在显示界面的控件区域显示所述最新第一部分图像。

4.如权利要求3所述的方法，其特征在于，所述依据所述显示界面上的滑动距离和所述滑动方向，确定所述第一部分图像的最新第一起始高度值，包括：

获取所述第一部分图像的原始第一起始高度值；

若所述滑动方向为向所述显示界面的底部滑动，则计算所述原始第一起始高度值减去所述滑动距离的第一差值；

若所述第一差值大于所述起始高度值，则将所述第一差值确定为所述最新第一起始高度值；若所述第一差值小于所述起始高度值，则将所述模糊图像的起始高度值，确定为所述最新第一起始高度值；

若所述滑动方向为向所述当前显示界面的顶部滑动，则计算所述原始第一起始高度值、所述滑动距离和所述显示高度值三者的第一和值；

若所述第一和值大于所述模糊图像的结束高度值，则将所述模糊图像的结束高度值减去所述显示高度值的第二差值，确定为所述最新第一起始高度值；若所述第一和值小于所述模糊图像的结束高度值，则将所述原始第一起始高度值和所述滑动距离的第二和值，确定为所述最新第一起始高度值。

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

确定所述控件区域的显示高度值；

将所述模糊图像的起始高度值与显示高度值的和值确定为所述第二部分图像的第二起始高度值，并将所述模糊图像的结束高度值确定为第二部分图像的第二结束高度值；

在所述模糊图像上，将所述第二起始高度值与所述第二结束高度值之间的图像，确定为所述第二部分图像。

6.如权利要求5所述的方法，其特征在于，还包括：

依据所述显示界面上的滑动距离和所述滑动方向，确定所述第二部分图像的最新第二起始高度值；

将所述模糊图像的结束高度值确定为最新第二结束高度值；

在所述模糊图像上，将所述最新第二起始高度值与所述最新第二结束高度值之间的图像，确定为最新第二部分图像。

7.如权利要求6所述的方法，其特征在于，依据所述显示界面上的滑动距离和所述滑动方向，确定所述第二部分图像的最新第二起始高度值，包括：

获取所述第二部分图像的原始第二起始高度值；

若所述滑动方向为向所述显示界面的底部滑动，则计算所述原始第二起始高度值减去所述滑动距离的第三差值；

若所述第三差值大于所述显示高度值，则将所述第三差值确定为所述最新第二起始高度值；若所述第三差值小于所述显示高度值，则将所述显示高度值确定为所述最新第二起始高度值；

若所述滑动方向为向所述显示界面的顶部滑动，则计算所述原始第二起始高度值与所述滑动距离的第三和值；

若所述第三和值大于所述模糊图像的结束高度值，则将所述模糊图像的结束高度值确定为所述最新第二起始高度值；若所述第三和值小于所述模糊图像的结束高度值，则将所述第三和值确定为所述最新第二起始高度值。

8.一种界面显示装置，其特征在于，包括：

第一获取单元，用于获取来源于网页的目标图像；

处理单元，用于对所述目标图像进行模糊处理后得到模糊图像；

显示单元，用于在显示界面的控件区域显示所述模糊图像的第一部分图像，同时，在显示界面的网页区域显示所述模糊图像的第二部分图像；

其中，所述控件区域与所述网页区域相接。

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

第一部分图像确定单元，用于确定所述控件区域的显示高度值；将所述模糊图像的起始高度值确定为所述第一部分图像的第一起始高度值；将所述第一起始高度值与所述显示高度值的和值确定为第一部分图像的第一结束高度值；在所述模糊图像上，将所述第一起始高度值与所述第一结束高度值之间的图像，确定为所述第一部分图像。

10.如权利要求9所述的装置，其特征在于，还包括：

第一起始高度值确定单元，用于依据所述显示界面上的滑动距离和所述滑动方向，确定所述第一部分图像的最新第一起始高度值；

第一结束高度值确定单元，用于将所述最新第一起始高度与所述显示高度值的和值，确定为第一部分图像的最新第一结束高度值；

确定第一部分图像单元，用于在所述模糊图像上，将所述最新第一起始高度值与最新第一结束高度值之间的图像，确定为最新第一部分图像；

第一部分图像显示单元，用于在显示界面的控件区域显示所述最新第一部分图像。

11.如权利要求10所述的装置，其特征在于，所述第一起始高度值确定单元，包括：

第二获取单元，用于获取所述第一部分图像的原始第一起始高度值；

第一计算单元，用于若所述滑动方向为向所述显示界面的底部滑动，则计算所述原始第一起始高度值减去所述滑动距离的第一差值；若所述第一差值大于所述起始高度值，则将所述第一差值确定为所述最新第一起始高度值；若所述第一差值小于所述起始高度值，则将所述模糊图像的起始高度值，确定为所述最新第一起始高度值；

第二计算单元，用于若所述滑动方向为向所述当前显示界面的顶部滑动，则计算所述原始第一起始高度值、所述滑动距离和所述显示高度值三者的第一和值；若所述第一和值大于所述模糊图像的结束高度值，则将所述模糊图像的结束高度值减去所述显示高度值的第二差值，确定为所述最新第一起始高度值；若所述第一和值小于所述模糊图像的结束高度值，则将所述原始第一起始高度值和所述滑动距离的第二和值，确定为所述最新第一起始高度值。

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

第二部分图像确定单元，用于确定所述控件区域的显示高度值；将所述模糊图像的起始高度值与显示高度值的和值确定为所述第二部分图像的第二起始高度值，并将所述模糊图像的结束高度值确定为第二部分图像的第二结束高度值；在所述模糊图像上，将所述第二起始高度值与所述第二结束高度值之间的图像，确定为所述第二部分图像。

13.如权利要求12所述的装置，其特征在于，还包括：

第二起始高度值确定单元，用于依据所述显示界面上的滑动距离和所述滑动方向，确定所述第二部分图像的最新第二起始高度值；

第二结束高度值确定单元，用于将所述模糊图像的结束高度值确定为最新第二结束高度值；

确定第二部分图像单元，用于在所述模糊图像上，将所述最新第二起始高度值与所述最新第二结束高度值之间的图像，确定为最新第二部分图像。

14.如权利要求13所述的装置，其特征在于，所述第二起始高度值确定单元，包括：

第三获取单元，用于获取所述第二部分图像的原始第二起始高度值；

第三计算单元，用于若所述滑动方向为向所述显示界面的底部滑动，则计算所述原始第二起始高度值减去所述滑动距离的第三差值；若所述第三差值大于所述显示高度值，则将所述第三差值确定为所述最新第二起始高度值；若所述第三差值小于所述显示高度值，则将所述显示高度值确定为所述最新第二起始高度值；

第四计算单元，用于若所述滑动方向为向所述显示界面的顶部滑动，则计算所述原始第二起始高度值与所述滑动距离的第三和值；若所述第三和值大于所述模糊图像的结束高度值，则将所述模糊图像的结束高度值确定为所述最新第二起始高度值；若所述第三和值小于所述模糊图像的结束高度值，则将所述第三和值确定为所述最新第二起始高度值。