本申請(qǐng)涉及自動(dòng)化技術(shù)領(lǐng)域，尤其涉及一種界面顯示方法及裝置。

背景技術(shù)：

目前，智能設(shè)備上安裝有眾多軟件應(yīng)用。在軟件應(yīng)用具體使用時(shí)，顯示界面上可以有控件區(qū)域和顯示網(wǎng)頁(yè)的網(wǎng)頁(yè)區(qū)域。其中，控件區(qū)域的顯示內(nèi)容為軟件應(yīng)用安裝在智能設(shè)備上的客戶端程序形成的，網(wǎng)頁(yè)區(qū)域?yàn)榭蛻舳伺c服務(wù)器交互之后在服務(wù)器獲取并顯示在網(wǎng)頁(yè)區(qū)域內(nèi)的。由于網(wǎng)頁(yè)區(qū)域和控件區(qū)域的實(shí)現(xiàn)方式不同，所以兩者的背景具有嚴(yán)重差異。

參見圖1為一種小說的顯示界面，該顯示界面包含控件區(qū)域11和網(wǎng)頁(yè)區(qū)域12。由圖1可以看出控件區(qū)域11的背景為一個(gè)圖像，網(wǎng)頁(yè)區(qū)域12的背景為另一圖像。

由于網(wǎng)頁(yè)區(qū)域和控件區(qū)域的背景具有嚴(yán)重差異，這導(dǎo)致用戶在體驗(yàn)上有明顯的割裂感。

技術(shù)實(shí)現(xiàn)要素：

本申請(qǐng)?zhí)峁┝?b>一種界面顯示方法及裝置，本申請(qǐng)能夠降低控件區(qū)域和網(wǎng)頁(yè)區(qū)域之間的背景差異，從而使得用戶在體驗(yàn)時(shí)無(wú)明顯的割裂感。

為了實(shí)現(xiàn)上述目的，本申請(qǐng)?zhí)峁┝艘韵录夹g(shù)手段：

一種界面顯示方法，包括：

獲取來(lái)源于網(wǎng)頁(yè)的目標(biāo)圖像；

對(duì)所述目標(biāo)圖像進(jìn)行模糊處理后得到模糊圖像；

在顯示界面的控件區(qū)域顯示所述模糊圖像的第一部分圖像，同時(shí)，在顯示界面的網(wǎng)頁(yè)區(qū)域顯示所述模糊圖像的第二部分圖像；

其中，所述控件區(qū)域與所述網(wǎng)頁(yè)區(qū)域相接。

優(yōu)選的，還包括：

確定所述控件區(qū)域的顯示高度值；

將所述模糊圖像的起始高度值確定為所述第一部分圖像的第一起始高度值，并將所述第一起始高度值與所述顯示高度值的和值確定為第一部分圖像的第一結(jié)束高度值；

在所述模糊圖像上，將所述第一起始高度值與所述第一結(jié)束高度值之間的圖像，確定為所述第一部分圖像。

優(yōu)選的，還包括：

依據(jù)所述顯示界面上的滑動(dòng)距離和所述滑動(dòng)方向，確定所述第一部分圖像的最新第一起始高度值；

將所述最新第一起始高度與所述顯示高度值的和值，確定為第一部分圖像的最新第一結(jié)束高度值；

在所述模糊圖像上，將所述最新第一起始高度值與最新第一結(jié)束高度值之間的圖像，確定為最新第一部分圖像；

在顯示界面的控件區(qū)域顯示所述最新第一部分圖像。

優(yōu)選的，所述依據(jù)所述顯示界面上的滑動(dòng)距離和所述滑動(dòng)方向，確定所述第一部分圖像的最新第一起始高度值，包括：

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

若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的底部滑動(dòng)，則計(jì)算所述原始第一起始高度值減去所述滑動(dòng)距離的第一差值；

若所述第一差值大于所述起始高度值，則將所述第一差值確定為所述最新第一起始高度值；若所述第一差值小于所述起始高度值，則將所述模糊圖像的起始高度值，確定為所述最新第一起始高度值；

若所述滑動(dòng)方向?yàn)橄蛩霎?dāng)前顯示界面的頂部滑動(dòng)，則計(jì)算所述原始第一起始高度值、所述滑動(dòng)距離和所述顯示高度值三者的第一和值；

若所述第一和值大于所述模糊圖像的結(jié)束高度值，則將所述模糊圖像的結(jié)束高度值減去所述顯示高度值的第二差值，確定為所述最新第一起始高度值；若所述第一和值小于所述模糊圖像的結(jié)束高度值，則將所述原始第一起始高度值和所述滑動(dòng)距離的第二和值，確定為所述最新第一起始高度值。

優(yōu)選的，還包括：

確定所述控件區(qū)域的顯示高度值；

將所述模糊圖像的起始高度值與顯示高度值的和值確定為所述第二部分圖像的第二起始高度值，并將所述模糊圖像的結(jié)束高度值確定為第二部分圖像的第二結(jié)束高度值；

在所述模糊圖像上，將所述第二起始高度值與所述第二結(jié)束高度值之間的圖像，確定為所述第二部分圖像。

優(yōu)選的，還包括：

依據(jù)所述顯示界面上的滑動(dòng)距離和所述滑動(dòng)方向，確定所述第二部分圖像的最新第二起始高度值；

將所述模糊圖像的結(jié)束高度值確定為最新第二結(jié)束高度值；

在所述模糊圖像上，將所述最新第二起始高度值與所述最新第二結(jié)束高度值之間的圖像，確定為最新第二部分圖像。

優(yōu)選的，依據(jù)所述顯示界面上的滑動(dòng)距離和所述滑動(dòng)方向，確定所述第二部分圖像的最新第二起始高度值，包括：

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

若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的底部滑動(dòng)，則計(jì)算所述原始第二起始高度值減去所述滑動(dòng)距離的第三差值；

若所述第三差值大于所述顯示高度值，則將所述第三差值確定為所述最新第二起始高度值；若所述第三差值小于所述顯示高度值，則將所述顯示高度值確定為所述最新第二起始高度值；

若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的頂部滑動(dòng)，則計(jì)算所述原始第二起始高度值與所述滑動(dòng)距離的第三和值；

若所述第三和值大于所述模糊圖像的結(jié)束高度值，則將所述模糊圖像的結(jié)束高度值確定為所述最新第二起始高度值；若所述第三和值小于所述模糊圖像的結(jié)束高度值，則將所述第三和值確定為所述最新第二起始高度值。

一種界面顯示裝置，包括：

第一獲取單元，用于獲取來(lái)源于網(wǎng)頁(yè)的目標(biāo)圖像；

處理單元，用于對(duì)所述目標(biāo)圖像進(jìn)行模糊處理后得到模糊圖像；

顯示單元，用于在顯示界面的控件區(qū)域顯示所述模糊圖像的第一部分圖像，同時(shí)，在顯示界面的網(wǎng)頁(yè)區(qū)域顯示所述模糊圖像的第二部分圖像；

其中，所述控件區(qū)域與所述網(wǎng)頁(yè)區(qū)域相接。

優(yōu)選的，還包括：

第一部分圖像確定單元，用于確定所述控件區(qū)域的顯示高度值；將所述模糊圖像的起始高度值確定為所述第一部分圖像的第一起始高度值；將所述第一起始高度值與所述顯示高度值的和值確定為第一部分圖像的第一結(jié)束高度值；在所述模糊圖像上，將所述第一起始高度值與所述第一結(jié)束高度值之間的圖像，確定為所述第一部分圖像。

優(yōu)選的，還包括：

第一起始高度值確定單元，用于依據(jù)所述顯示界面上的滑動(dòng)距離和所述滑動(dòng)方向，確定所述第一部分圖像的最新第一起始高度值；

第一結(jié)束高度值確定單元，用于將所述最新第一起始高度與所述顯示高度值的和值，確定為第一部分圖像的最新第一結(jié)束高度值；

確定第一部分圖像單元，用于在所述模糊圖像上，將所述最新第一起始高度值與最新第一結(jié)束高度值之間的圖像，確定為最新第一部分圖像；

第一部分圖像顯示單元，用于在顯示界面的控件區(qū)域顯示所述最新第一部分圖像。

優(yōu)選的，所述第一起始高度值確定單元，包括：

第二獲取單元，用于獲取所述第一部分圖像的原始第一起始高度值；

第一計(jì)算單元，用于若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的底部滑動(dòng)，則計(jì)算所述原始第一起始高度值減去所述滑動(dòng)距離的第一差值；若所述第一差值大于所述起始高度值，則將所述第一差值確定為所述最新第一起始高度值；若所述第一差值小于所述起始高度值，則將所述模糊圖像的起始高度值，確定為所述最新第一起始高度值；

第二計(jì)算單元，用于若所述滑動(dòng)方向?yàn)橄蛩霎?dāng)前顯示界面的頂部滑動(dòng)，則計(jì)算所述原始第一起始高度值、所述滑動(dòng)距離和所述顯示高度值三者的第一和值；若所述第一和值大于所述模糊圖像的結(jié)束高度值，則將所述模糊圖像的結(jié)束高度值減去所述顯示高度值的第二差值，確定為所述最新第一起始高度值；若所述第一和值小于所述模糊圖像的結(jié)束高度值，則將所述原始第一起始高度值和所述滑動(dòng)距離的第二和值，確定為所述最新第一起始高度值。

優(yōu)選的，還包括：

第二部分圖像確定單元，用于確定所述控件區(qū)域的顯示高度值；將所述模糊圖像的起始高度值與顯示高度值的和值確定為所述第二部分圖像的第二起始高度值，并將所述模糊圖像的結(jié)束高度值確定為第二部分圖像的第二結(jié)束高度值；在所述模糊圖像上，將所述第二起始高度值與所述第二結(jié)束高度值之間的圖像，確定為所述第二部分圖像。

優(yōu)選的，還包括：

第二起始高度值確定單元，用于依據(jù)所述顯示界面上的滑動(dòng)距離和所述滑動(dòng)方向，確定所述第二部分圖像的最新第二起始高度值；

第二結(jié)束高度值確定單元，用于將所述模糊圖像的結(jié)束高度值確定為最新第二結(jié)束高度值；

確定第二部分圖像單元，用于在所述模糊圖像上，將所述最新第二起始高度值與所述最新第二結(jié)束高度值之間的圖像，確定為最新第二部分圖像。

優(yōu)選的，所述第二起始高度值確定單元，包括：

第三獲取單元，用于獲取所述第二部分圖像的原始第二起始高度值；

第三計(jì)算單元，用于若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的底部滑動(dòng)，則計(jì)算所述原始第二起始高度值減去所述滑動(dòng)距離的第三差值；若所述第三差值大于所述顯示高度值，則將所述第三差值確定為所述最新第二起始高度值；若所述第三差值小于所述顯示高度值，則將所述顯示高度值確定為所述最新第二起始高度值；

第四計(jì)算單元，用于若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的頂部滑動(dòng)，則計(jì)算所述原始第二起始高度值與所述滑動(dòng)距離的第三和值；若所述第三和值大于所述模糊圖像的結(jié)束高度值，則將所述模糊圖像的結(jié)束高度值確定為所述最新第二起始高度值；若所述第三和值小于所述模糊圖像的結(jié)束高度值，則將所述第三和值確定為所述最新第二起始高度值。

經(jīng)過上述技術(shù)手段，可以實(shí)現(xiàn)以下有益效果：

本申請(qǐng)實(shí)施例中，在控件區(qū)域顯示模糊圖像的第一部分圖像，同時(shí)，在網(wǎng)頁(yè)區(qū)域顯示模糊圖像的第二部分圖像。即：本申請(qǐng)能夠使控件區(qū)域和網(wǎng)頁(yè)區(qū)域均采用同一圖像作為背景，從而減小控件區(qū)域和網(wǎng)頁(yè)區(qū)域兩者之間的背景差異，進(jìn)而使得用戶在體驗(yàn)時(shí)無(wú)明顯的割裂感。

附圖說明

為了更清楚地說明本申請(qǐng)實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對(duì)實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡(jiǎn)單地介紹，顯而易見地，下面描述中的附圖僅僅是本申請(qǐng)的一些實(shí)施例，對(duì)于本領(lǐng)域普通技術(shù)人員來(lái)講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)這些附圖獲得其他的附圖。

圖1為現(xiàn)有技術(shù)的顯示界面的示意圖；

圖2為本申請(qǐng)實(shí)施例公開的界面顯示方法的流程圖；

圖3a-3c為本申請(qǐng)實(shí)施例公開的界面顯示方法中網(wǎng)頁(yè)區(qū)域和網(wǎng)頁(yè)區(qū)域的示意圖；

圖4為本申請(qǐng)實(shí)施例公開的界面顯示方法中確定第一部分圖像的流程圖；

圖5為本申請(qǐng)實(shí)施例公開的界面顯示方法中模糊圖像的示意圖；

圖6為本申請(qǐng)實(shí)施例公開的界面顯示方法中確定第二部分圖像的流程圖；

圖7為本申請(qǐng)實(shí)施例公開的界面顯示方法中確定最新第一部分圖像的流程圖；

圖8為本申請(qǐng)實(shí)施例公開的界面顯示方法中確定最新第一起始高度值的流程圖；

圖9為本申請(qǐng)實(shí)施例公開的界面顯示方法中確定最新第二部分圖像的流程圖；

圖10為本申請(qǐng)實(shí)施例公開的界面顯示方法中確定最新第二起始高度值的流程圖；

圖11為本申請(qǐng)實(shí)施例公開的界面顯示裝置的結(jié)構(gòu)示意圖；

圖12為本申請(qǐng)實(shí)施例公開的又一界面顯示裝置的結(jié)構(gòu)示意圖；

圖13為本申請(qǐng)實(shí)施例公開的界面顯示裝置中更新第一部分圖像的結(jié)構(gòu)示意圖；

圖14為本申請(qǐng)實(shí)施例公開的界面顯示裝置中第一起始高度值確定單元的結(jié)構(gòu)示意圖；

圖15為本申請(qǐng)實(shí)施例公開的界面顯示裝置中更新第二部分圖像的結(jié)構(gòu)示意圖；

圖16為本申請(qǐng)實(shí)施例公開的界面顯示裝置中第二起始高度值確定單元的結(jié)構(gòu)示意圖。

具體實(shí)施方式

下面將結(jié)合本申請(qǐng)實(shí)施例中的附圖，對(duì)本申請(qǐng)實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本申請(qǐng)一部分實(shí)施例，而不是全部的實(shí)施例?；诒旧暾?qǐng)中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本申請(qǐng)保護(hù)的范圍。

本申請(qǐng)?zhí)峁┝艘环N界面顯示方法，應(yīng)用于終端的控制器。如圖2所示，具體包括步驟S201-S204：

步驟S201：獲取來(lái)源于網(wǎng)頁(yè)的目標(biāo)圖像。

與網(wǎng)頁(yè)區(qū)域?qū)?yīng)的網(wǎng)頁(yè)上有許多圖像，控制器在網(wǎng)頁(yè)上獲取一幅圖像作為目標(biāo)圖像。目標(biāo)圖像的目的在于：將目標(biāo)圖像同時(shí)作為網(wǎng)頁(yè)區(qū)域和控件區(qū)域的背景圖像，從而降低網(wǎng)頁(yè)區(qū)域和控件區(qū)域的背景差異。

步驟S202：對(duì)所述目標(biāo)圖像進(jìn)行模糊處理后得到模糊圖像。

本實(shí)施例對(duì)目標(biāo)圖像進(jìn)行模糊處理的目的有兩個(gè)：

第一個(gè)目的：獲得與目標(biāo)圖像對(duì)應(yīng)的模糊圖像。

由于控件區(qū)域和網(wǎng)頁(yè)區(qū)域需要向用戶展示顯示界面的正常內(nèi)容。如圖3a所示，為直接采用目標(biāo)圖像作為控件區(qū)域和網(wǎng)頁(yè)區(qū)域的背景圖像的示意圖。由圖示可看出，控件區(qū)域和網(wǎng)頁(yè)區(qū)域的背景圖像過于明顯，這會(huì)影響用戶查看控件區(qū)域和網(wǎng)頁(yè)區(qū)域的正常內(nèi)容。

鑒于此，本申請(qǐng)對(duì)目標(biāo)圖像進(jìn)行模糊處理得到模糊圖像。模糊處理的方式可以為高斯模糊處理，當(dāng)然還可以是其它模糊處理方式，在此不再一一列舉。

模糊圖像僅保留目標(biāo)圖像的大體輪廓，在模糊圖像上目標(biāo)圖像的顏色和內(nèi)容均會(huì)產(chǎn)生模糊效果。如圖3b所示，為采用模糊圖像作為控件區(qū)域和網(wǎng)頁(yè)區(qū)域的背景圖像的示意圖。由圖3b可以看出，使用模糊圖像作為控件區(qū)域和網(wǎng)頁(yè)區(qū)域的背景圖像，可以不影響用戶查看控件區(qū)域和網(wǎng)頁(yè)區(qū)域的正常內(nèi)容。

第二個(gè)目的：獲得與預(yù)設(shè)高度值和屏幕寬度值匹配的模糊圖像。

由于目標(biāo)圖像的寬度值一般小于終端的屏幕寬度值，若直接將與目標(biāo)圖像同等寬度的模糊圖像作為控件區(qū)域和網(wǎng)頁(yè)區(qū)域的背景圖像，則呈現(xiàn)至用戶 的效果如圖3a或圖3b所示。由圖示可以看出，模糊圖像僅占據(jù)網(wǎng)頁(yè)區(qū)域和控件區(qū)域的部分空間而非全部空間，這導(dǎo)致用戶在使用時(shí)體驗(yàn)較差。

為此，在對(duì)目標(biāo)圖像進(jìn)行模糊處理的同時(shí)，加入變更圖像大小的計(jì)算，使得最終得到的模糊圖像與屏幕寬度值相同，并且具有預(yù)設(shè)高度值。其中，模糊圖像的預(yù)設(shè)高度值可以為：控件區(qū)域的高度值和網(wǎng)頁(yè)區(qū)域的高度值的和值。

如圖3c所示，為采用與屏幕寬度值一致且具有預(yù)設(shè)高度值的模糊圖像，作為控件區(qū)域和網(wǎng)頁(yè)區(qū)域的背景圖像的示意圖。由圖3c可以看出，背景圖像能夠占據(jù)網(wǎng)頁(yè)區(qū)域和控件區(qū)域的整體寬度和整體高度，即背景圖像占據(jù)網(wǎng)頁(yè)區(qū)域和空間區(qū)域的全部空間，所以該種顯示效果可以明顯提升用戶感受。

步驟S203：在顯示界面的控件區(qū)域顯示所述模糊圖像的第一部分圖像，同時(shí)，在顯示界面的網(wǎng)頁(yè)區(qū)域顯示所述模糊圖像的第二部分圖像。

在顯示界面上，所述控件區(qū)域位于所述網(wǎng)頁(yè)區(qū)域的上方，且，所述控件區(qū)域與所述網(wǎng)頁(yè)區(qū)域相接；即控件區(qū)域和網(wǎng)頁(yè)區(qū)域相互貼合。

為了減小控件區(qū)域和網(wǎng)頁(yè)區(qū)域的背景差異，控制器在控件區(qū)域顯示所述模糊圖像的第一部分圖像，同時(shí)，在網(wǎng)頁(yè)區(qū)域顯示模糊圖像的第二部分圖像。這樣可以使得控件區(qū)域和網(wǎng)頁(yè)區(qū)域均能夠?qū)⒛：龍D像作為背景圖像，進(jìn)而降低控件區(qū)域和網(wǎng)頁(yè)區(qū)域的背景差異。

其中，第一部分圖像和第二部分圖像可以為模糊圖像上同一位置的圖像，當(dāng)然也可以是模糊圖像上不同位置的圖像。優(yōu)選的情況下，第一部分圖像和第二部分圖像可拼接成目標(biāo)圖像的全部圖像；即第一部分圖像和第二部分圖像在拼接之后可以展現(xiàn)出完整的目標(biāo)圖像；換言之，第一部分圖像和第二部分圖像可以實(shí)現(xiàn)無(wú)縫結(jié)合。

下面分別針對(duì)本步驟進(jìn)行進(jìn)一步說明：

首先介紹在控件區(qū)域顯示第一部分圖像的具體過程。如圖4所示，包括步驟S401-S403：

步驟S401：確定所述控件區(qū)域的顯示高度值。

步驟S402：將所述模糊圖像的起始高度值確定為所述第一部分圖像的第一起始高度值，并將所述第一起始高度與所述顯示高度值的和值確定為所述第一部分圖像的第一結(jié)束高度值。

參見圖5，假設(shè)模糊圖像的起始高度值為0，結(jié)束高度值為H；控件區(qū)域的顯示高度值為h。在起始時(shí)刻，控制器將模糊圖像的起始高度值0作為第一部分圖像的第一起始高度值，并將控件區(qū)域的顯示高度值h作為第一部分圖像的第一結(jié)束高度值。

步驟S403：在所述模糊圖像上，將所述第一起始高度值與所述第一結(jié)束高度值之間的圖像，確定為所述第一部分圖像。

控制器將模糊圖像上0-h之間的圖像，確定為第一部分圖像。由于第一部分圖像的大小與控件區(qū)域的大小一致，所以便可以在控件區(qū)域顯示第一部分圖像。

采用上述圖4所示的實(shí)施例，可實(shí)現(xiàn)對(duì)控件區(qū)域添加背景圖像的目的。然后介紹所述網(wǎng)頁(yè)區(qū)域顯示模糊圖像的第二部分圖像的具體執(zhí)行過程。如圖6所示，具體包括步驟S601-S603：

步驟S601：確定所述控件區(qū)域的顯示高度值。

步驟S602：將所述模糊圖像的起始高度值和所述顯示高度值的和值確定為所述第二部分圖像的第二起始高度值，并將所述模糊圖像的結(jié)束高度值確定為第二部分圖像的第二結(jié)束高度值。

參見圖5所示，為了實(shí)現(xiàn)控件區(qū)域和網(wǎng)頁(yè)區(qū)域的無(wú)縫結(jié)合的目的，將模糊圖像的起始高度值0和顯示高度值h的和值(h)作為第二部分圖像的第二起始高度值，將模糊圖像的結(jié)束高度值H作為第二結(jié)束高度值。

步驟S603：在所述模糊圖像上，將所述第二起始高度值與所述第二結(jié)束高度值之間的圖像，確定為所述第二部分圖像。

由于第二部分圖像的大小與網(wǎng)頁(yè)區(qū)域的大小一致，所以直接在網(wǎng)頁(yè)區(qū)域顯示第二部分圖像。在圖6所示的實(shí)施例結(jié)束后便可實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)區(qū)域添加背景圖像的目的。

在圖2所示的實(shí)施例中，在控件區(qū)域顯示模糊圖像的第一部分圖像，同時(shí)，在網(wǎng)頁(yè)區(qū)域顯示模糊圖像的第二部分圖像。即：本申請(qǐng)能夠使控件區(qū)域和網(wǎng)頁(yè)區(qū)域均采用同一圖像作為背景，從而減小控件區(qū)域和網(wǎng)頁(yè)區(qū)域兩者之間的背景差異，使得用戶在體驗(yàn)時(shí)無(wú)明顯的割裂感。

此外，當(dāng)?shù)谝徊糠謭D像和第二部分圖像拼接為目標(biāo)圖像后，可以實(shí)現(xiàn)控件區(qū)域和網(wǎng)頁(yè)區(qū)域的背景圖像無(wú)縫結(jié)合的目的，從而進(jìn)一步提升用戶體驗(yàn)。

上述過程為在控件區(qū)域和網(wǎng)頁(yè)區(qū)域顯示背景圖像的過程。當(dāng)用戶在顯示界面上執(zhí)行上、下滑動(dòng)操作時(shí)，網(wǎng)頁(yè)區(qū)域的顯示內(nèi)容會(huì)隨之發(fā)生改變。如果在控件區(qū)域顯示的第一部分圖像和在網(wǎng)頁(yè)區(qū)域顯示的第二部分圖像不發(fā)生改變，則控件區(qū)域和網(wǎng)頁(yè)區(qū)域的背景圖像則無(wú)法實(shí)現(xiàn)無(wú)縫結(jié)合的效果。為此，本申請(qǐng)?zhí)峁└碌谝徊糠謭D像和第二部分圖像的技術(shù)手段：

如圖7所示，為了實(shí)現(xiàn)控件區(qū)域和網(wǎng)頁(yè)區(qū)域的背景圖像無(wú)縫結(jié)合的目的，在用戶在網(wǎng)頁(yè)上進(jìn)行上下滑動(dòng)時(shí)，控件區(qū)域可以隨著滑動(dòng)方向更新第一部分圖像；具體執(zhí)行步驟為S701-S704：

步驟S701：依據(jù)所述顯示界面上的滑動(dòng)距離和滑動(dòng)方向，確定所述第一部分圖像的最新第一起始高度值。

如圖8所示，本步驟在具體實(shí)現(xiàn)時(shí)可以采用如下步驟S801-S810：

步驟S801：獲取所述第一部分圖像的原始第一起始高度值。

設(shè)控件區(qū)域顯示的第一部分圖像在滑動(dòng)前最近一次的起始高度為原始第一起始高度。假設(shè)原始第一起始高度值為n，且0＜n＜H-h；在模糊圖像上n至(n+h)之間圖像為第一部分圖像。

步驟S802：確定滑動(dòng)方向；若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的底部滑動(dòng)，則進(jìn)入步驟S803；若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的頂部滑動(dòng)，則進(jìn)入步驟S807。

當(dāng)用戶在網(wǎng)頁(yè)上滑動(dòng)方向?yàn)橄蝻@示界面的底部滑動(dòng)時(shí)，說明網(wǎng)頁(yè)區(qū)域需要顯示模糊圖像上在原始第二部分圖像上方的圖像。為了達(dá)到控件區(qū)域和網(wǎng)頁(yè)區(qū)域無(wú)縫結(jié)合的目的，控件區(qū)域也需要顯示模糊圖像上在原始第一部分圖像上方的圖像，以便第一部分圖像和第二部分圖像同步移動(dòng)；此時(shí)進(jìn)入步驟S803具體確定更新后的第一部分圖像。

當(dāng)用戶在網(wǎng)頁(yè)上滑動(dòng)方向?yàn)橄蝻@示界面的頂部滑動(dòng)時(shí)，說明網(wǎng)頁(yè)區(qū)域需要顯示模糊圖像上在原始第二部分圖像下方的圖像；為了達(dá)到控件區(qū)域和網(wǎng)頁(yè)區(qū)域無(wú)縫結(jié)合的目的，控件區(qū)域也需要顯示模糊圖像上在原始第一部分圖像下方的圖像，以便第一部分圖像和第二部分圖像同步移動(dòng)；此時(shí)進(jìn)入步驟S807具體確定更新后的第一部分圖像。

步驟S803：計(jì)算所述原始第一起始高度值減去所述滑動(dòng)距離的第一差值，即：若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的底部滑動(dòng)，則計(jì)算所述原始第一起始高度值減去所述滑動(dòng)距離的第一差值。

在滑動(dòng)方向?yàn)橄蛩鲲@示界面的底部滑動(dòng)時(shí)，控件區(qū)域也需要顯示模糊圖像上在原始第一部分圖像上方的圖像，模糊圖像上方的圖像越接近模糊圖像的起始高度值，即控件區(qū)域的原始第一起始高度值n需要向模糊圖像的起始高度值0靠近。

由于第一部分圖像的第一起始高度值的最小高度值即為模糊圖像的起始高度值0，所以需要計(jì)算原始第一起始高度值n減去滑動(dòng)距離d的第一差值C1。然后，進(jìn)入步驟S804，判斷第一差值C1與起始高度值0的大小。

步驟S804：判斷第一差值是否大于起始高度值；若是，則進(jìn)入步驟S805，否則進(jìn)入步驟S806。

步驟S805：將所述第一差值確定為所述最新第一起始高度值，即若所述第一差值大于起始高度值0，則將所述第一差值確定為所述最新第一起始高度值。

若原始第一起始高度值n減去滑動(dòng)距離d的第一差值C1大于起始高度值0，則說明原始第一部分圖像下移滑動(dòng)距離d之后，得到更新后第一部分圖像的最新第一起始高度值未達(dá)到第一部分圖像的第一起始高度值的最小高度值0。所以此時(shí)將第一差值C1作為更新后第一部分圖像的最新第一起始高度值。

步驟S806：將所述模糊圖像的起始高度值確定為所述最新第一起始高度值；即若所述第一差值小于起始高度值，則將所述模糊圖像的起始高度值，確定為所述最新第一起始高度值。

若原始第一起始高度值n減去滑動(dòng)距離d的第一差值C1小于0，則說明原始第一部分圖像下移滑動(dòng)距離d之后，得到更新后第一部分圖像的第一起始高度值已達(dá)到第一部分圖像的最小高度值0；所以此時(shí)將模糊圖像的起始高度值0作為最新第一起始高度值。

步驟S807：計(jì)算所述原始第一起始高度值、所述滑動(dòng)距離和所述顯示高度值三者的第一和值；即若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的頂部滑動(dòng)，則計(jì)算所述原始第一起始高度值、所述滑動(dòng)距離和所述顯示高度值三者的第一和值。

在滑動(dòng)方向?yàn)橄蛩鲲@示界面的頂部滑動(dòng)時(shí)，控件區(qū)域也需要顯示模糊圖像上在原始第一部分圖像下方的圖像，即控件區(qū)域的原始第一結(jié)束高度值n+h需要向第一部分圖像的第一結(jié)束高度的最大值H靠近。

為了判斷滑動(dòng)距離是否超出第一結(jié)束高度值的最大值H，因此需要計(jì)算原始第一起始高度值n、滑動(dòng)距離d和高度值h的第一和值A(chǔ)1(即第一結(jié)束高度值)。然后，進(jìn)入步驟S808，判斷第一和值A(chǔ)1與第一結(jié)束高度值的最大值H的大小。

步驟S808：判斷所述第一和值是否大于模糊圖像的結(jié)束高度值；若大于進(jìn)入步驟S809，否則進(jìn)入步驟S810。

步驟S809：若所述第一和值大于所述結(jié)束高度值，則將所述結(jié)束高度值減去所述顯示高度值的第二差值，確定為所述最新第一起始高度值。

若第一和值A(chǔ)1大于第一結(jié)束高度值的最大值H，則說明第一部分圖像下移滑動(dòng)距離d之后，得到更新后第一部分圖像的第一起始高度值已超過第一部分圖像第一起始高度值的最大值H-h；所以，此時(shí)第一部分圖像第一起始高度值的最大值H-h作為最新第二起始高度值。

步驟S810：若所述第一和值小于所述結(jié)束高度值，則將所述原始第一起始高度值和所述滑動(dòng)距離的第二和值，確定為所述最新第一起始高度值。

若第一和值A(chǔ)1小于第一結(jié)束高度值的最大值H，則第一部分圖像下移滑動(dòng)距離d之后，得到的更新后第二起始高度值未達(dá)到第一部分圖像第一起始高度的最大高度值H-h。因此，此時(shí)將所述原始第二起始高度值n和所述滑動(dòng)距離d的第二和值A(chǔ)2，作為最新第二起始高度值。

接著返回圖7，進(jìn)入步驟S702：將所述最新第一起始高度值與所述顯示高度值的和值，確定為第一部分圖像的最新第一結(jié)束高度值。

步驟S703：在所述模糊圖像上，將所述最新第一起始高度值與最新第一結(jié)束高度值之間的圖像，確定為最新第一部分圖像。

步驟S704：在顯示界面的控件區(qū)域顯示所述最新第一部分圖像。

由于控件區(qū)域的顯示高度值是一定的，在重新確定最新第一起始高度值之后，便可確定最新第一結(jié)束高度值，從而在模糊圖像上確定第一部分圖像。

圖7所示的實(shí)施例為確定控件區(qū)域更新后的第一部分圖像過程，下面介紹確定網(wǎng)頁(yè)區(qū)域更新后第二部分圖像的具體過程。如圖9所示，具體執(zhí)行步驟為S901-S904：

步驟S901：依據(jù)所述顯示界面上的滑動(dòng)距離和滑動(dòng)方向，確定所述第二部分圖像的最新第二起始高度值。

如圖10所示，本步驟在具體執(zhí)行時(shí)包括步驟S1001-S1010：

步驟S1001：獲取所述第二部分圖像的原始第二起始高度值。

首先，確定第二部分圖像的原始第二起始高度值，后續(xù)的處理過程均依據(jù)原始第二起始高度值來(lái)進(jìn)行。原始第二起始高度值為顯示界面滑動(dòng)前的第二部分圖像的第二起始高度。假設(shè)網(wǎng)頁(yè)區(qū)域的原始第二起始高度值為h，第二起始高度值的范圍為h＜m＜H，且m至H之間為第二部分圖像。

步驟S1002：確定滑動(dòng)方向；若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的底部滑動(dòng)，則進(jìn)入步驟S1003；若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的頂部滑動(dòng)，則進(jìn)入步驟S1007。

其次，確定用戶在顯示界面上執(zhí)行的滑動(dòng)方向，具體包括兩種方向：向所述顯示界面的底部滑動(dòng)和向所述顯示界面的頂部滑動(dòng)；不同的滑動(dòng)方向決定后續(xù)不同的執(zhí)行步驟。

當(dāng)滑動(dòng)方向?yàn)橄蛩鲲@示界面的底部滑動(dòng)時(shí)，說明網(wǎng)頁(yè)區(qū)域需要顯示模糊圖像上在原始第二部分圖像上方的圖像；即第二起始高度值m需要向顯示高度值h靠近。此時(shí)進(jìn)入步驟S1003具體確定最新的第二部分圖像。

當(dāng)滑動(dòng)方向?yàn)橄蛩鲲@示界面的頂部滑動(dòng)時(shí)，說明網(wǎng)頁(yè)區(qū)域需要顯示模糊圖像上在原始第二部分圖像下方的圖像；即第二起始高度值m需要向H靠近。此時(shí)進(jìn)入步驟S1007具體確定最新的第二部分圖像。

步驟S1003：計(jì)算所述原始第二起始高度值減去所述滑動(dòng)距離的第三差值；即若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的底部滑動(dòng)，則計(jì)算所述原始第二起始高度值減去所述滑動(dòng)距離的第三差值。

假設(shè)滑動(dòng)距離為d，在滑動(dòng)方向?yàn)橄蛩鲲@示界面的底部滑動(dòng)時(shí)，第二起始高度值m需要向h靠近。由于第二部分圖像的最小高度值為高度值h。所以需要計(jì)算原始第二起始高度值m減去滑動(dòng)距離d的第三差值C3。然后，進(jìn)入步驟S1004，判斷第三差值C3與高度值h的大小。

步驟S1004：判斷所述第三差值是否大于所述顯示高度值；若是，則進(jìn)入步驟S1005，否則進(jìn)入步驟S1006。

步驟S1005：將所述第三差值確定為所述最新第二起始高度值，即：若所述第三差值大于所述顯示高度值，則將所述第三差值確定為所述最新第二起始高度值。

若第三差值C3大于高度值h，則說明移動(dòng)滑動(dòng)距離d之后，得到的最新第二起始高度值未達(dá)到第二部分圖像第二起始高度值的最小值h。所以此時(shí)將第三差值C3作為最新第二起始高度值。

步驟S1006：將所述顯示高度值確定為所述最新第二起始高度值，即若所述第三差值小于所述顯示高度值，則將所述顯示高度值確定為所述最新第二起始高度值。

若第三差值C3小于顯示高度值h，則說明移動(dòng)滑動(dòng)距離之后，得到的最新第二起始高度值為已經(jīng)小于第二部分圖像的最小高度值h。所以此時(shí)將顯示高度值h作為最新第二起始高度值。

步驟S1007：計(jì)算所述原始第二起始高度值與所述滑動(dòng)距離的第三和值；即：若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的頂部滑動(dòng)，則計(jì)算所述原始第二起始高度值與所述滑動(dòng)距離的第三和值。

在滑動(dòng)方向?yàn)橄蛩鲲@示界面的頂部滑動(dòng)時(shí)，說明第二起始高度值m需要向H靠近。由于第二部分圖像的最大高度值為模糊圖像結(jié)束高度值H。所以需要計(jì)算原始第二起始高度值m加上滑動(dòng)距離d的第三和值A(chǔ)3。然后，進(jìn)入步驟S1008，判斷第三和值A(chǔ)3與模糊圖像高度值H的大小。

步驟S1008：判斷所述第三和值是否大于模糊圖像的結(jié)束高度值；若大于，則進(jìn)入步驟S1009；若小于，則進(jìn)入步驟S1010。

步驟S1009：將所述模糊圖像的結(jié)束高度值確定為所述最新第二起始高度值，即若所述第三和值大于所述模糊圖像的結(jié)束高度值，則將所述模糊圖像的結(jié)束高度值確定為所述最新第二起始高度值。

若第三和值A(chǔ)3大于模糊圖像的結(jié)束高度值H，則說明移動(dòng)滑動(dòng)距離之后得到的最新第二起始高度值為超過第二部分圖像的最大高度值H。所以此時(shí)將模糊圖像的結(jié)束高度值H作為最新第二起始高度值。

步驟S1010：將所述第三和值確定為所述最新第二起始高度值，即：若所述第三和值小于所述模糊圖像的高度值，則將所述第三和值確定為所述最新第二起始高度值。

若第三和值A(chǔ)3小于模糊圖像高度值H，則說明移動(dòng)滑動(dòng)距離d之后，得到的最新第二起始高度值為未超過第二部分圖像的最大高度值H。所以此時(shí)將第三和值A(chǔ)3作為最新第二起始高度值。

接著返回圖9，進(jìn)入步驟S902：將所述模糊圖像的結(jié)束高度值確定為最新第二結(jié)束高度值。

步驟S903：在所述模糊圖像上，將所述最新第二起始高度值與所述最新第二結(jié)束高度值之間的圖像，確定為最新第二部分圖像。

步驟S904：在顯示界面的網(wǎng)頁(yè)區(qū)域顯示所述最新第二部分圖像。

本實(shí)施例中重新確定第二部分圖像的最新第二起始高度值和最新第二結(jié)束高度值，便可確定能夠?qū)崿F(xiàn)控件區(qū)域和網(wǎng)頁(yè)區(qū)域能夠無(wú)縫結(jié)合的最新的第二部分圖像。

在執(zhí)行上述圖7和圖9所示的實(shí)施例之后，便可確定最新第一部分圖像和最新第二部分圖像，以使得在顯示界面滑動(dòng)后，第一部分圖像和第二部分圖像還可以一直維持無(wú)縫結(jié)合的效果。

如圖11所示，本申請(qǐng)還提供了一種界面顯示裝置，包括：

第一獲取單元111，用于獲取來(lái)源于網(wǎng)頁(yè)的目標(biāo)圖像；

處理單元112，用于對(duì)所述目標(biāo)圖像進(jìn)行模糊處理后得到模糊圖像；

顯示單元113，用于在顯示界面的控件區(qū)域顯示所述模糊圖像的第一部分圖像，同時(shí)，在顯示界面的網(wǎng)頁(yè)區(qū)域顯示所述模糊圖像的第二部分圖像；

其中，所述控件區(qū)域與所述網(wǎng)頁(yè)區(qū)域相接。

如圖12所示，本申請(qǐng)?zhí)峁┑慕缑骘@示裝置，還包括：

第一部分圖像確定單元114，用于確定所述控件區(qū)域的顯示高度值；將所述模糊圖像的起始高度值確定為所述第一部分圖像的第一起始高度值；將所述第一起始高度值與所述顯示高度值的和值確定為第一部分圖像的第一結(jié)束高度值；在所述模糊圖像上，將所述第一起始高度值與所述第一結(jié)束高度值之間的圖像，確定為所述第一部分圖像。

第二部分圖像確定單元115，用于確定所述控件區(qū)域的顯示高度值；將所述模糊圖像的起始高度值與顯示高度值的和值確定為所述第二部分圖像的第二起始高度值，并將所述模糊圖像的結(jié)束高度值確定為第二部分圖像的第二結(jié)束高度值；在所述模糊圖像上，將所述第二起始高度值與所述第二結(jié)束高度值之間的圖像，確定為所述第二部分圖像。

為了實(shí)現(xiàn)第一部分圖像和第二部分圖像無(wú)縫結(jié)合的目的，本申請(qǐng)所提供的界面顯示裝置，還包括更新第一部分圖像和第二部分圖像的內(nèi)容。

針對(duì)更新第一部分圖像，如圖13所示，本申請(qǐng)?zhí)峁┑慕缑骘@示裝置還包括：

第一起始高度值確定單元1301，用于依據(jù)所述顯示界面上的滑動(dòng)距離和所述滑動(dòng)方向，確定所述第一部分圖像的最新第一起始高度值；

第一結(jié)束高度值確定單元1302，用于將所述最新第一起始高度與所述顯示高度值的和值，確定為第一部分圖像的最新第一結(jié)束高度值；

確定第一部分圖像單元1303，用于在所述模糊圖像上，將所述最新第一起始高度值與最新第一結(jié)束高度值之間的圖像，確定為最新第一部分圖像；

第一部分圖像顯示單元1304，用于在顯示界面的控件區(qū)域顯示所述最新第一部分圖像。

其中，如圖14所示，所述第一起始高度值確定單元1301，包括：

第二獲取單元1401，用于獲取所述第一部分圖像的原始第一起始高度值；

第一計(jì)算單元1402，用于若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的底部滑動(dòng)，則計(jì)算所述原始第一起始高度值減去所述滑動(dòng)距離的第一差值；若所述第一差值大于所述起始高度值，則將所述第一差值確定為所述最新第一起始高度值；若所述第一差值小于所述起始高度值，則將所述模糊圖像的起始高度值，確定為所述最新第一起始高度值；

第二計(jì)算單元1403，用于若所述滑動(dòng)方向?yàn)橄蛩霎?dāng)前顯示界面的頂部滑動(dòng)，則計(jì)算所述原始第一起始高度值、所述滑動(dòng)距離和所述顯示高度值三者的第一和值；若所述第一和值大于所述模糊圖像的結(jié)束高度值，則將所述模糊圖像的結(jié)束高度值減去所述顯示高度值的第二差值，確定為所述最新第一起始高度值；若所述第一和值小于所述模糊圖像的結(jié)束高度值，則將所述 原始第一起始高度值和所述滑動(dòng)距離的第二和值，確定為所述最新第一起始高度值。

針對(duì)更新第二部分圖像，如圖15所示，本申請(qǐng)?zhí)峁┑慕缑骘@示裝置還包括：

第二起始高度值確定單元1501，用于依據(jù)所述顯示界面上的滑動(dòng)距離和所述滑動(dòng)方向，確定所述第二部分圖像的最新第二起始高度值；

第二結(jié)束高度值確定單元1502，用于將所述模糊圖像的結(jié)束高度值確定為最新第二結(jié)束高度值；

確定第二部分圖像單元1503，用于在所述模糊圖像上，將所述最新第二起始高度值與所述最新第二結(jié)束高度值之間的圖像，確定為最新第二部分圖像。

其中，如圖16所示，所述第二起始高度值確定單元1501，包括：

第三獲取單元1601，用于獲取所述第二部分圖像的原始第二起始高度值；

第三計(jì)算單元1602，用于若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的底部滑動(dòng)，則計(jì)算所述原始第二起始高度值減去所述滑動(dòng)距離的第三差值；若所述第三差值大于所述顯示高度值，則將所述第三差值確定為所述最新第二起始高度值；若所述第三差值小于所述顯示高度值，則將所述顯示高度值確定為所述最新第二起始高度值；

第四計(jì)算單元1603，用于若所述滑動(dòng)方向?yàn)橄蛩鲲@示界面的頂部滑動(dòng)，則計(jì)算所述原始第二起始高度值與所述滑動(dòng)距離的第三和值；若所述第三和值大于所述模糊圖像的結(jié)束高度值，則將所述模糊圖像的結(jié)束高度值確定為所述最新第二起始高度值；若所述第三和值小于所述模糊圖像的結(jié)束高度值，則將所述第三和值確定為所述最新第二起始高度值。

本申請(qǐng)實(shí)施例中，在控件區(qū)域顯示模糊圖像的第一部分圖像，同時(shí)，在網(wǎng)頁(yè)區(qū)域顯示模糊圖像的第二部分圖像。即：本申請(qǐng)能夠使控件區(qū)域和網(wǎng)頁(yè)區(qū)域均采用同一圖像作為背景，從而減小控件區(qū)域和網(wǎng)頁(yè)區(qū)域兩者之間的背景差異，進(jìn)而使得用戶在體驗(yàn)時(shí)無(wú)明顯的割裂感。

本實(shí)施例方法所述的功能如果以軟件功能單元的形式實(shí)現(xiàn)并作為獨(dú)立的產(chǎn)品銷售或使用時(shí)，可以存儲(chǔ)在一個(gè)計(jì)算設(shè)備可讀取存儲(chǔ)介質(zhì)中。基于這樣的理解，本申請(qǐng)實(shí)施例對(duì)現(xiàn)有技術(shù)做出貢獻(xiàn)的部分或者該技術(shù)方案的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來(lái)，該軟件產(chǎn)品存儲(chǔ)在一個(gè)存儲(chǔ)介質(zhì)中，包括若干指令用以使得一臺(tái)計(jì)算設(shè)備(可以是個(gè)人計(jì)算機(jī)，服務(wù)器，移動(dòng)計(jì)算設(shè)備或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本申請(qǐng)各個(gè)實(shí)施例所述方法的全部或部分步驟。而前述的存儲(chǔ)介質(zhì)包括：U盤、移動(dòng)硬盤、只讀存儲(chǔ)器(ROM，Read-Only Memory)、隨機(jī)存取存儲(chǔ)器(RAM，Random Access Memory)、磁碟或者光盤等各種可以存儲(chǔ)程序代碼的介質(zhì)。

本說明書中各個(gè)實(shí)施例采用遞進(jìn)的方式描述，每個(gè)實(shí)施例重點(diǎn)說明的都是與其它實(shí)施例的不同之處，各個(gè)實(shí)施例之間相同或相似部分互相參見即可。

對(duì)所公開的實(shí)施例的上述說明，使本領(lǐng)域?qū)I(yè)技術(shù)人員能夠?qū)崿F(xiàn)或使用本申請(qǐng)。對(duì)這些實(shí)施例的多種修改對(duì)本領(lǐng)域的專業(yè)技術(shù)人員來(lái)說將是顯而易見的，本文中所定義的一般原理可以在不脫離本申請(qǐng)的精神或范圍的情況下，在其它實(shí)施例中實(shí)現(xiàn)。因此，本申請(qǐng)將不會(huì)被限制于本文所示的這些實(shí)施例，而是要符合與本文所公開的原理和新穎特點(diǎn)相一致的最寬的范圍。