專利名稱：頁面顯示的方法及設(shè)備的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及計算機技術(shù)領(lǐng)域，具體涉及一種頁面顯示的方法及設(shè)備。
背景技術(shù)：
圖層提供了一種對頁面對象進行有效控制的手段，圖層可以包括文本、圖片、表格、插件，也可以在圖層里面嵌套其他圖層。在HTML (HypertextMarkup Language,超文本標記語言)文檔的正文部分可以放置的元素都可以放入圖層內(nèi)。由于圖層可以放置在頁面的任何位置，從而能有效控制頁面中的對象。在現(xiàn)有技術(shù)中可通過控制圖層的顯示或隱藏，以實現(xiàn)頁面交互技術(shù)，但由于在現(xiàn)有技術(shù)中圖層從隱藏至完全顯示的過程視覺跳躍性較強，影響用戶體驗。

發(fā)明內(nèi)容
鑒于上述問題，提出了本發(fā)明以便提供一種克服上述問題或者至少部分地解決上述問題的頁面顯示的方法及設(shè)備。依據(jù)本發(fā)明的一個方面，提供了一種頁面顯示的方法，頁面包括第一圖層和與第一圖層相關(guān)聯(lián)的第二圖層，且第二圖層隱藏顯示，方法包括以下步驟檢測用戶在頁面上的操作位置，當(dāng)操作位置從第一圖層的范圍之外進入第一圖層的范圍之內(nèi)時，觸發(fā)在第一圖層之上疊加顯示第二圖層；逐步改變第二圖層的位置，直到第二圖層的位置達到第一圖層范圍內(nèi)的第一預(yù)定位置為止；使第二圖層停止移動達第一預(yù)定時間；以及將第二圖層的位置從第一預(yù)定位置設(shè)置為第一圖層之上的第二預(yù)定位置。可選地，第二圖層處于位于第一圖層的底部的不可見區(qū)域中來隱藏顯示?？蛇x地，用戶在頁面上的操作位置從第一圖層的范圍之外進入第一圖層的范圍之內(nèi)通過將光標滑動到第一圖層上和/或點擊第一圖層來實現(xiàn)?？蛇x地，第一預(yù)定位置和第二預(yù)定位置分別位于第一圖層上的兩個不同的位置?？蛇x地，在將第二圖層從第一預(yù)定位置移動至第一圖層之上的第二預(yù)定位置的步驟之后，方法還包括當(dāng)用戶在頁面上的操作離開第一圖層時，隱藏第二圖層。根據(jù)本發(fā)明的另一個方面，提供了一種頁面顯示的設(shè)備，頁面包括第一圖層和與第一圖層相關(guān)聯(lián)的第二圖層，而且第二圖層隱藏顯示，設(shè)備包括檢測模塊，用于檢測用戶在頁面上的操作位置，當(dāng)操作位置從第一圖層的范圍之外進入第一圖層的范圍之內(nèi)時，發(fā)送觸發(fā)在第一圖層之上疊加顯示第二圖層的消息；以及第二圖層呈現(xiàn)模塊，在接收到檢測模塊發(fā)送的觸發(fā)消息之后，適于逐步改變第二圖層的位置，直到第二圖層的位置達到第一圖層范圍內(nèi)的第一預(yù)定位置為止，使第二圖層停止移動達第一預(yù)定時間，以及將第二圖層的位置從第一預(yù)定位置設(shè)置為第一圖層之上的第二預(yù)定位置。根據(jù)本發(fā)明的頁面顯示的方法及設(shè)備，首先逐步改變第二圖層的位置，然后當(dāng)?shù)诙D層的位置達到第一圖層范圍內(nèi)的第一預(yù)定位置時，使第二圖層停止移動達第一預(yù)定時間，最后將第二圖層的位置從第一預(yù)定位置設(shè)置為第一圖層之上的第二預(yù)定位置，通過增加疊加顯示中的中間過度過程，即當(dāng)?shù)诙D層的位置達到第一圖層范圍內(nèi)的第一預(yù)定位置時，使第二圖層停止移動達第一預(yù)定時間，由此降低第二圖層在第一圖層上的疊加顯示過程的跳躍性，從而改善用戶的視覺體驗。上述說明僅是本發(fā)明技術(shù)方案的概述，為了能夠更清楚了解本發(fā)明的技術(shù)手段，而可依照說明書的內(nèi)容予以實施，并且為了讓本發(fā)明的上述和其它目的、特征和優(yōu)點能夠更明顯易懂，以下特舉本發(fā)明的具體實施方式
。


通過閱讀下文優(yōu)選實施方式的詳細描述，各種其他的優(yōu)點和益處對于本領(lǐng)域普通技術(shù)人員將變得清楚明了。附圖僅用于示出優(yōu)選實施方式的目的，而并不認為是對本發(fā)明的限制。而且在整個附圖中，用相同的參考符號表示相同的部件。在附圖中圖1示出了根據(jù)本發(fā)明一個實施例的頁面顯示的方法的流程圖；以及圖2示出了根據(jù)本發(fā)明一個實施例的頁面顯示的設(shè)備的框圖。
具體實施例方式下面將參照附圖更詳細地描述本公開的示例性實施例。雖然附圖中顯示了本公開的示例性實施例，然而應(yīng)當(dāng)理解，可以以各種形式實現(xiàn)本公開而不應(yīng)被這里闡述的實施例所限制。相反，提供這些實施例是為了能夠更透徹地理解本公開，并且能夠?qū)⒈竟_的范圍完整的傳達給本領(lǐng)域的技術(shù)人員。隨著互聯(lián)網(wǎng)應(yīng)用的快速發(fā)展，一些頁面交互的技術(shù)也在不斷進步，越來越多的頁面交互采用諸如CSS (Cascading Style Sheet,級聯(lián)樣式表)，Javascript代碼等技術(shù)，以實現(xiàn)在網(wǎng)頁上呈現(xiàn)具有吸引力的界面。在現(xiàn)有的利用圖層進行頁面交互的設(shè)計中，首先在頁面的界面上顯示第一圖層，并且在第一圖層中可顯示某個產(chǎn)品的圖片，當(dāng)用戶滑動鼠標到該第一圖層中時，會在第一圖層上疊加顯示第二圖層，并且在第二圖層中顯示對第一圖層中的產(chǎn)品進一步描述的內(nèi)容。然而，在上述圖層疊加方式中，通常是在觸發(fā)疊加事件后，馬上在第一圖層上疊加顯示第二圖層。由于在疊加顯示第二圖層的過程中缺乏中間過渡過程，導(dǎo)致疊加顯示第二圖層的視覺跳躍性較強，影響了用戶體驗。為此，本發(fā)明提出了一種頁面顯示的方法及設(shè)備。本發(fā)明提出的頁面顯示的方法主要是，在第一圖層之上疊加顯示第二圖層時，首先逐步改變第二圖層的位置，然后當(dāng)?shù)诙D層的位置達到第一圖層范圍內(nèi)的第一預(yù)定位置時，使第二圖層停止移動達第一預(yù)定時間，最后再將第二圖層的位置從第一預(yù)定位置設(shè)置為第一圖層之上的第二預(yù)定位置，從而實現(xiàn)第二圖層以平滑的方式疊加顯示在第一圖層上，由此減少第二圖層在第一圖層上疊加顯示過程中的跳躍性，改善用戶的視覺體驗。下面結(jié)合圖1具體說明根據(jù)本發(fā)明一個實施例的、適于解決上述問題的頁面顯示的方法100的流程圖。如圖1所示，本發(fā)明的實施例的頁面顯示的方法100始于步驟S 110，在步驟SllO
中，設(shè)置第一圖層以及與第一圖層相關(guān)聯(lián)的第二圖層?？蛇x地，在以HTML格式編寫的頁面上設(shè)置第一圖層和與第一圖層相關(guān)聯(lián)的第二圖層，第一圖層和第二圖層中可以包括文本、圖片、表格、插件中的任意一個或多個。上述相關(guān)聯(lián)可以是指第一圖層中的文本、圖片、表格或者插件與第二圖層中的文本、圖片、表格或插件相關(guān)聯(lián)，例如第二圖層中的圖片所顯示的內(nèi)容是對第一圖層中的圖片所顯示內(nèi)容的進一步解釋說明。根據(jù)本發(fā)明的一個實施例，第一圖層和第二圖層為CSS圖層，即第一圖層和第二圖層可以用HTML中的CSS代碼來實現(xiàn)。例如第一圖層和第二圖層的CSS代碼如下(I)第一圖層(layer_A)的初始CSS代碼為#layer_A{display:1niine_block ;float: left;height:164px;margin-right 27px;overflow:hidden;position:relative;width:226px;}其中，layer_A的CSS樣式屬性包括display (顯示)inline_block (對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞)、float (浮動)left (左浮動)、height (高度)164px (高度 164px)、margin-right (右邊緣)27px (距離右邊 27px)、overflow (溢出)hidden (隱藏溢出)、position (位置)relative (相對定位)、width (寬度)226px(寬度226px)。通過第一圖層(layer_A)的四個CSS樣式屬性height、width、overflow和position，為第二圖層(layer_B)構(gòu)造了一個封閉的、相對定位的父元素，該父元素為第一圖層(layer_A),子元素為第二圖層(layer_B)。(2)第二圖層(layer_B)的初始CSS代碼為#layer_B{display:block ；height:136px;left:14px;position:absolute;top:178px;width:198px;z-1ndex:100;}其中，第二圖層(layer_B)的CSS樣式屬性包括display (顯示)block (塊對象);height (高度)136px (高度 136px); left (左邊距)14px (距離左邊 14px); position(位置):absolute (絕對定位);top (頂邊距)178px (距離頂部 178px); width (寬度)198px(寬度 198px) ; z-1ndex (z 軸方向高度):100 (z-1ndex 屬性值 100)。第二圖層(layer_B)的position設(shè)為絕對定位(absolute),而且第二圖層(layer_B)的top的值比第一圖層(layer_A)的height的值更大,使得第二圖層(layer_B)絕對定位在第一圖層(layer_A)中底部的不可見區(qū)域。根據(jù)本發(fā)明的一個實施例，第二圖層是第一圖層的一個子元素，當(dāng)?shù)诙D層和第一圖層不發(fā)生疊加時，顯示第一圖層。當(dāng)發(fā)生疊加時，第二圖層將疊加在第一圖層上，此時第一圖層和第二圖層可展示為兩個點擊按鈕，用戶通過點擊第一圖層和第二圖層可分別鏈接到不同的網(wǎng)址。下面介紹第一圖層(layer_A)和第二圖層(layer_B)設(shè)置在頁面中的HTML代碼<//' id= "layer A ”〉
<span id f'layer B”><a largel " blank1' href !,hlip://frmino. wan. # src==360wan-jp-frmmo " class "mask conlerU link”〉〈span class "mask conIenI iii”><h3.> 仙劍情<M、3><e.m> 用色扮演</em > </span >
<span class=”mask—contentJxff>仙劍經(jīng)典傳承，重溫美好'回憶。完美2D即時戰(zhàn)斗游戲大作，修仙養(yǎng)寵^尋找你的夢中情人。</span>
</a>
<spcm class= "mask amnteri bin "><a class= "new!l large! " blank" href "hllpi/ffnmno.wan. 360. cn/ganic login.php scrvcr id SI07Samp;src 36(hvan-jp-frmmo”> 進入
新區(qū)</a>
<a class "start" largel= " bkuik" href "hllp///rmino.wan. 360. cn src=3 eOwan-jp-frmmo "> 開始游戲</u >
</span> </span>
<span classwidih "226" height= "164" all ”仙劍情”sn: "hllp://p4.qhimg.c om/i()16a9ebeafa()f()59bc.jpg"> </span>
li>隨后，在步驟S120中，隱藏第二圖層?？蛇x地，可通過如下設(shè)置來實現(xiàn)隱藏顯示第二圖層將第二圖層處于位于第一圖層的底部的不可見區(qū)域中。當(dāng)?shù)谝粓D層和第二圖層為CSS圖層時，在步驟S120中將第二圖層絕對定位在第一圖層中底部的不可見區(qū)域中。隱藏第二圖層的CSS代碼可參見上述介紹第二圖層的初始CSS代碼的部分。隨后，在步驟S130中，檢測用戶在頁面上的操作位置，當(dāng)操作位置從第一圖層的范圍之外進入第一圖層的范圍之內(nèi)時，觸發(fā)在第一圖層之上疊加顯示第二圖層?？蛇x地，用戶在頁面上的操作位置從第一圖層的范圍之外進入第一圖層的范圍之內(nèi)可通過將光標滑動到第一圖層上和/或點擊第一圖層來實現(xiàn)。也就是，在第一圖層上綁定鼠標進入的事件onmouseenter。當(dāng)鼠標進入第一圖層時，觸發(fā)在第一圖層之上疊加顯示第二圖層。在第一圖層上綁定鼠標進入的事件的代碼示例如下
$('iilayer A ').on('mouse.enier', JiinciionQ/
I/第二圖層(layer B )平滑地進入第一圖層(layer A )。在第二圖層(layer—B )即將到達第一預(yù)定位置時，會停止平緩滑動;//停頓片刻后(毫秒級的停頓，例如50毫秒),然后改成以跳躍的方式直接到達預(yù)定的位置σ
smoolhEnter(//平滑動作完成后的回調(diào)函數(shù),以執(zhí)行下一步的動作funclionO /
//首先使用setTimeout函數(shù)停頓50毫秒,然后第二圖層(layer B )以跳躍的方式直接到達第二預(yù)定的位置
seiTimeoiiUfnnciionO {
Il跳躍移動至第二預(yù)定位置 skipEnterQ:1 50);
I
);
}隨后，在步驟S140中，逐 步改變第二圖層的位置，直到第二圖層的位置達到第一圖層范圍內(nèi)的第一預(yù)定位置為止?？蛇x地，第二圖層平滑疊加在第一圖層上，直到第二圖層的位置達到第一圖層范圍內(nèi)的第一預(yù)定位置為止，該第一預(yù)定位置可以是第二圖層的頂部距離第一圖層的頂部為
預(yù)定距離時的位置。例如可使用開源Javascript框架-JQuery中的動畫函數(shù)animate
來實現(xiàn)逐步改變第二圖層的位置，該函數(shù)的說明如下函數(shù)animate (properties, [duration], [easing], [callback])參數(shù)Properties :一組CSS樣式屬性,動畫將按照上述屬性移動。Duration :一個字符串或者數(shù)字決定動畫將運行多久。
Easing :要使用的擦除效果的名稱,默認jQuery提供"linear"和"swing"。Callback (回調(diào)函數(shù))在動畫完成時執(zhí)行的函數(shù)。通過animate函數(shù),第二圖層的CSS樣式屬性top的取值從初始值平滑地減少至預(yù)定距離值(例如IOpxjP 10像素)，也就是第二圖層平滑的移動到離第一圖層的頂部相差I(lǐng)Opx的第一預(yù)定位置時，會執(zhí)行下述的步驟S150。當(dāng)然可以理解的是，在本發(fā)明的實施例中并不限定上述預(yù)定距離值的具體取值范圍。實現(xiàn)步驟S140的代碼如下
//第二圖層(layer B )平滑進入第一圖層(layer A )。第二圖層(layer B )的頂部離第一圖層(layer A )的頂部相差I(lǐng)Opx時，停止移動第二圖層·(layer B )，進而調(diào)用回調(diào)函數(shù)callbackfunction smoolh1:.nier(callback) {
//{'topMWpx'}表示第二圖層的頂部離第一圖層的頂部相差10像素時,第二圖層(layer B )停止移動
//150指的是該動畫效果將在150毫秒內(nèi)完成
//swing是默認的動畫擦除效果
// callback 是 smoothEnter 的回調(diào)函數(shù)
V '!layer B ,).animaie({ ορ'I Opx V, 150, 'swing', callback);
}隨后，在步驟S150中，使第二圖層停止移動達到第一預(yù)定時間。隨后，在步驟S160中，將第二圖層的位置從第一預(yù)定位置設(shè)置為第一圖層之上的第二預(yù)定位置?？蛇x地，第一預(yù)定位置和第二預(yù)定位置分別位于第一圖層上的兩個不同的位置。根據(jù)本發(fā)明的一個實施例，可采用下列方式將第二圖層的位置從第一預(yù)定位置設(shè)置為第一圖層之上的第二預(yù)定位置，以實現(xiàn)第二圖層以跳躍的方式達到第一圖層之上的第二預(yù)定位置。即，設(shè)置第二圖層的CSS樣式屬性，使第二圖層的位置屬性被設(shè)置為第二預(yù)定位置。具體到上述步驟中，在步驟S150中，當(dāng)?shù)诙D層平滑地到達距離第一圖層頂部IOpx處的第一預(yù)定位置后，停止移動第二圖層第一預(yù)定時間(例如50毫秒)，然后在步驟S160中設(shè)置第二圖層的CSS樣式屬性，使得第二圖層以跳躍的方式“瞬間”到達第二預(yù)定位置，代碼示例如下//第二圖層(layer B )以跳躍方式到達第二預(yù)定位置
Jiuiciion skipl,:nl.er() {
//通過設(shè)置第二圖層(layer B )的CSS樣式屬性，使得第二圖層(layer B )展現(xiàn)在第二預(yù)定位置:{'top':Opx'}
$('lilayer B'). css ({ ορ ρχ'});
}
//停頓50毫秒
set I imcou (funciion () {
//跳躍移動至第二預(yù)定位置skip Enier () }，50);在步驟S160之后，整個方法可以直接結(jié)束。但為了增強用戶體驗的效果，使得用戶操作完成后，可以隱藏第二圖層，可以在步驟S160之后再執(zhí)行步驟S170。在步驟S170中，當(dāng)用戶在頁面上的操作離開第一圖層時，隱藏第二圖層。具體地，通過設(shè)置第二圖層的CSS樣式屬性，使第二圖層處于第一圖層下方的不可見區(qū)域。例如鼠標離開第一圖層時，將會重置第一圖層和第二圖層的CSS樣式屬性，重新隱藏第二圖層。例如，使用JQuery的函數(shù)animate,將第二圖層(layer_B)的CSS樣式屬性top從O漸變至178px，從而能夠?qū)崿F(xiàn)隱藏第二圖層(layer_B)的目的。實現(xiàn)隱藏第二圖層的CSS代碼如下
// .在第一圖層(layer A )上綁定monseJeave事件 SCiilayer A 'j.onfmouseleave, funcl1.onQf
Sf'illayer B').aninialeff'lop'178px'/, 150, 'swing', callback);
});需要說明的是，圖1所示的方法并不限定按所示的各步驟的順序進行，可以根據(jù)需要調(diào)整各步驟的先后順序，另外，所述步驟也不限定于上述步驟劃分，上述步驟可以進一步拆分成更多步驟也可以合并成更少步驟，例如將步驟SllO拆分為兩個步驟，也可以講步驟SllO與步驟S120合并。下面結(jié)合圖2說明根據(jù)本發(fā)明一個實施例的、適于解決上述問題的一種頁面顯示的設(shè)備200。如圖2所示，本發(fā)明的實施例中頁面顯示的設(shè)備200包括檢測模塊210和第二圖層呈現(xiàn)模塊220。為了說明方便起見，圖2中還示出了頁面20、以及在頁面20中的第一圖層201和與第一圖層201相關(guān)聯(lián)的第二圖層203，且第二圖層203隱藏顯示。可選地，第二圖層203處于位于第一圖層201的底部的不可見區(qū)域中來隱藏顯示。可選地，第一圖層和第二圖層為CSS圖層，即第一圖層和第二圖層可以用HTML中的CSS代碼來實現(xiàn)。例如第一圖層和第二圖層的CSS代碼如下(I)第一圖層(layer_A)的初始CSS代碼為#layer_A{display:1niine_block ;float: left;height:164px;margin-right 27px;overflow:hidden;position:relative;width:226px;}其中，layer_A的CSS樣式屬性包括display (顯示)inline_block (對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞)、float (浮動)left (左浮動)、height (高度)164px (高度 164px)、margin-right (右邊緣)27px (距離右邊 27px)、overflow (溢出)hidden (隱藏溢出)、position (位置)relative (相對定位)、width (寬度)226px(寬度226px)。通過第一圖層(layer_A)的四個CSS樣式屬性height、width、overflow和position，為第二圖層(layer_B)構(gòu)造了一個封閉的、相對定位的父元素，該父元素為第一圖層(layer_A),子元素為第二圖層(layer_B)。(2)第二圖層(layer_B)的初始CSS代碼為#layer_B{display:block ；height:136px;left:14px;position:absolute;top:178px;width:198px;z-1ndex:100;}其中，第二圖層(layer_B)的CSS樣式屬性包括display (顯示)block (塊對象);height (高度)136px (高度 136px); left (左邊距)14px (距離左邊 14px); position(位置):absolute (絕對定位);top (頂邊距)178px (距離頂部 178px); width (寬度)198px(寬度 198px) ; z-1ndex (z 軸方向高度):100 (z-1ndex 屬性值 100)。第二圖層(layer_B)的position設(shè)為絕對定位(absolute),而且第二圖層(layer_B)的top的值比第一圖層(layer_A)的height的值更大,使得第二圖層(layer_B)絕對定位在第一圖層(layer_A)中底部的不可見區(qū)域。檢測模塊210檢測用戶在頁面20上的操作位置，當(dāng)操作位置從第一圖層201的范圍之外進入第一圖層201的范圍之內(nèi)時，發(fā)送觸發(fā)在第一圖層201之上疊加顯示第二圖層203的消息?？蛇x地，檢測模塊210通過檢測光標是否滑動到第一圖層201上和/或點擊第一圖層201來判斷用戶在頁面20上的操作位置是否從第一圖層201的范圍之外進入第一圖層201的范圍之內(nèi)。例如在第一圖層201上綁定鼠標進入的事件onmouseenter。當(dāng)檢測模塊210檢測到鼠標的光標滑動到第一圖層201上和/或第一圖層201附近時，發(fā)送觸發(fā)在第一圖層201之上疊加顯示第二圖層203的消息。在第一圖層201上綁定鼠標進入的事
件的代碼示例如下$( layer A'). on ('in ouseen terfunci ion (){
//第二圖層203 (layer B )平滑地進入第一圖層201 (layer A )。在第二圖層203 (layer—B)即將到達第一預(yù)定位置時，會停止平緩滑動;//停頓片刻后(毫秒級的停頓,例如50毫秒)，然后改成以跳躍的方式直接到達預(yù)定的位置。
smoothlirUeri
//平滑動作完成后的回調(diào)函數(shù)，以執(zhí)行下一步的動作funcl1.onQ {Il首先使用setTimeout函數(shù)停頓50毫秒，然后第二圖層203(layer B )以跳躍的方式直接到達第二預(yù)定的位置sei 7'imeoulffiinciion() {// M兆躍移動至第二預(yù)定位置skiplinterQ;}’ 50);
}
)；
}第二圖層呈現(xiàn)模塊220在接收到檢測模塊210發(fā)出的出發(fā)消息之后，首先逐步改變第二圖層203的位置，直到第二圖層203的位置達到第一圖層201范圍內(nèi)的第一預(yù)定位置為止，隨后使第二圖層203在第一預(yù)定位置停止移動達第一預(yù)定時間，以及在第一預(yù)定時間之后，將通過第二圖層203 的位置從第一預(yù)定位置設(shè)置為第一圖層201之上的第二預(yù)定位置?？蛇x地，第二圖層呈現(xiàn)模塊202控制第二圖層203平滑疊加在第一圖層201上，直到第二圖層203的位置達到第一圖層201范圍內(nèi)的第一預(yù)定位置為止。該第一預(yù)定位置可以是第二圖層203的頂部距離第一圖層201的頂部為預(yù)定距離(例如ΙΟρχ，即10像素)時
的位置。例如可使用開源Javascript框架-JQuery中的動畫函數(shù)animate來實現(xiàn)逐步
改變第二圖層的位置，通過animate函數(shù),第二圖層203的CSS樣式屬性top的取值從初始值平滑地減少至預(yù)定距離(例如ΙΟρχ)。當(dāng)然可以理解的是，在本發(fā)明的實施例中并不限定上述預(yù)定距離的具體取值范圍。可選地，當(dāng)?shù)诙D層203的頂部離第一圖層201的頂部相差I(lǐng)Opx (第一預(yù)定位置)時，第二圖層呈現(xiàn)模塊202控制停止移動第二圖層203第一預(yù)定時間(例如50毫秒)，然后設(shè)置第二圖層203的CSS樣式屬性，使得第二圖層203位置屬性值被設(shè)置為第二預(yù)定位置。
根據(jù)本發(fā)明的另一實施例中，為了增強用戶體驗的效果，使得用戶操作完成后，可以隱藏第二圖層203，頁面顯示的設(shè)備200還包括隱藏模塊230，當(dāng)用戶在頁面20上的操作離開第一圖層201時，隱藏模塊230隱藏第二圖層203?？蛇x地，隱藏模塊230通過設(shè)置第二圖層的CSS樣式屬性，使第二圖層移動至處于第一圖層下方的不可見區(qū)域。例如鼠標離開第一圖層時，將會重置第一圖層和第二圖層的CSS樣式屬性,重新隱藏第二圖層。例如,使用JQuery的函數(shù)animate,將第二圖層(layer_B)的CSS樣式屬性top從O漸變至178px,從而能夠?qū)崿F(xiàn)隱藏第二圖層(layer_B)的目的。可選地，頁面20以HTML格式編寫，第二圖層203是第一圖層201的子元素。例如第一圖層201和第二圖層203用HTML中的CSS代碼來實現(xiàn)。根據(jù)本發(fā)明的另一實施例中，隱藏模塊230進一步用于將第二圖層203絕對定位在第一圖層201中底部的不可見區(qū)域中?？蛇x地，隱藏模塊230進一步用于通過設(shè)置第二圖層203的CSS樣式屬性，使第二圖層203處于第一圖層201下方的不可見區(qū)域。例如鼠標離開第一圖層201時，將會重置第一圖層201和第二圖層203的CSS樣式屬性，重新隱藏第二圖層203。可選地,使用JQuery的函數(shù)animate,將第二圖層203的CSS樣式屬性top從O漸變至178px，從而能夠?qū)崿F(xiàn)隱藏第二圖層203的目的。根據(jù)本發(fā)明的頁面顯示的方法及設(shè)備，首先逐步改變第二圖層的位置，然后當(dāng)?shù)诙D層的位置達到第一圖層范圍內(nèi)的第一預(yù)定位置時，使第二圖層停止移動達第一預(yù)定時間，最后將第二圖層的位置從第一預(yù)定位置設(shè)置為第一圖層之上的第二預(yù)定位置，通過增加疊加顯示中的中間過度過程，即當(dāng)?shù)诙D層的位置達到第一圖層范圍內(nèi)的第一預(yù)定位置時，使第二圖層停止移動達第一預(yù)定時間，由此降低第二圖層在第一圖層上的疊加顯示過程的跳躍性，從而改善用戶的視覺體驗。在此提供的算法和顯示不與任何特定計算機、虛擬系統(tǒng)或者其它設(shè)備固有相關(guān)。各種通用系統(tǒng)也可以與基于在此的示教一起使用。根據(jù)上面的描述，構(gòu)造這類系統(tǒng)所要求的結(jié)構(gòu)是顯而易見的。此外，本發(fā)明也不針對任何特定編程語言。應(yīng)當(dāng)明白，可以利用各種編程語言實現(xiàn)在此描述的本發(fā)明的內(nèi)容，并且上面對特定語言所做的描述是為了披露本發(fā)明的最佳實施方式。在此處所提供的說明書中，說明了大量具體細節(jié)。然而，能夠理解，本發(fā)明的實施例可以在沒有這些具體細節(jié)的情況下實踐。在一些實例中，并未詳細示出公知的方法、結(jié)構(gòu)和技術(shù)，以便不模糊對本說明書的理解。類似地，應(yīng)當(dāng)理解，為了精簡本公開并幫助理解各個發(fā)明方面中的一個或多個，在上面對本發(fā)明的示例性實施例的描述中，本發(fā)明的各個特征有時被一起分組到單個實施例、圖、或者對其的描述中。然而，并不應(yīng)將該公開的方法解釋成反映如下意圖即所要求保護的本發(fā)明要求比在每個權(quán)利要求中所明確記載的特征更多的特征。更確切地說，如下面的權(quán)利要求書所反映的那樣，發(fā)明方面在于少于前面公開的單個實施例的所有特征。因此，遵循具體實施方式
的權(quán)利要求書由此明確地并入該具體實施方式
，其中每個權(quán)利要求本身都作為本發(fā)明的單獨實施例。本領(lǐng)域那些技術(shù)人員可以理解，可以對實施例中的設(shè)備中的模塊進行自適應(yīng)性地改變并且把它們設(shè)置在與該實施例不同的一個或多個設(shè)備中?？梢园褜嵤├械哪K或單元或組件組合成一個模塊或單元或組件，以及此外可以把它們分成多個子模塊或子單元或子組件。除了這樣的特征和/或過程或者單元中的至少一些是相互排斥之外，可以采用任何組合對本說明書(包括伴隨的權(quán)利要求、摘要和附圖)中公開的所有特征以及如此公開的任何方法或者設(shè)備的所有過程或單元進行組合。除非另外明確陳述，本說明書(包括伴隨的權(quán)利要求、摘要和附圖)中公開的每個特征可以由提供相同、等同或相似目的的替代特征來代替。此外，本領(lǐng)域的技術(shù)人員能夠理解，盡管在此所述的一些實施例包括其它實施例中所包括的某些特征而不是其它特征，但是不同實施例的特征的組合意味著處于本發(fā)明的范圍之內(nèi)并且形成不同的實施例。例如，在下面的權(quán)利要求書中，所要求保護的實施例的任意之一都可以以任意的組合方式來使用。本發(fā)明的各個部件實施例可以以硬件實現(xiàn)，或者以在一個或者多個處理器上運行的軟件模塊實現(xiàn)，或者以它們的組合實現(xiàn)。本領(lǐng)域的技術(shù)人員應(yīng)當(dāng)理解，可以在實踐中使用微處理器或者數(shù)字信號處理器(DSP)來實現(xiàn)根據(jù)本發(fā)明實施例的頁面顯示的設(shè)備中的一些或者全部部件的一些或者全部功能。本發(fā)明還可以實現(xiàn)為用于執(zhí)行這里所描述的方法的一部分或者全部的設(shè)備或者裝置程序(例如，計算機程序和計算機程序產(chǎn)品)。這樣的實現(xiàn)本發(fā)明的程序可以存儲在計算機可讀介質(zhì)上，或者可以具有一個或者多個信號的形式。這樣的信號可以從因特網(wǎng)網(wǎng)站上下載得到，或者在載體信號上提供，或者以任何其他形式提供。應(yīng)該注意的是上述實施例對本發(fā)明進行說明而不是對本發(fā)明進行限制，并且本領(lǐng)域技術(shù)人員在不脫離所附權(quán)利要求的范圍的情況下可設(shè)計出替換實施例。在權(quán)利要求中，不應(yīng)將位于括號之間的任何參考符號構(gòu)造成對權(quán)利要求的限制。單詞“包含”不排除存在未列在權(quán)利要求中的元件或步驟。位于元件之前的單詞“一”或“一個”不排除存在多個這樣的元件。本發(fā)明可以借助于包括有若干不同元件的硬件以及借助于適當(dāng)編程的計算機來實現(xiàn)。在列舉了若干裝置的單元權(quán)利要求中，這些裝置中的若干個可以是通過同一個硬件項來具體體現(xiàn)。單詞第一、第二、以及第三等的使用不表示任何順序?？蓪⑦@些單詞解釋為名稱。
權(quán)利要求
1.一種頁面顯示的方法，所述頁面包括第一圖層和與所述第一圖層相關(guān)聯(lián)的第二圖層，且所述第二圖層隱藏顯示，所述方法包括步驟 檢測用戶在頁面上的操作位置，當(dāng)所述操作位置從所述第一圖層的范圍之外進入所述第一圖層的范圍之內(nèi)時，觸發(fā)在所述第一圖層之上疊加顯示所述第二圖層； 逐步改變所述第二圖層的位置，直到所述第二圖層的位置達到所述第一圖層范圍內(nèi)的第一預(yù)定位置為止； 使所述第二圖層停止移動達第一預(yù)定時間；以及 將所述第二圖層的位置從所述第一預(yù)定位置設(shè)置為所述第一圖層之上的第二預(yù)定位置。
2.根據(jù)權(quán)利要求1所述的方法，其中，所述第二圖層處于位于所述第一圖層的底部的不可見區(qū)域中來隱藏顯示。
3.根據(jù)權(quán)利要求1所述的方法，其中，所述用戶在頁面上的操作位置從所述第一圖層的范圍之外進入所述第一圖層的范圍之內(nèi)通過將光標滑動到所述第一圖層上和/或點擊所述第一圖層來實現(xiàn)。
4.根據(jù)權(quán)利要求1所述的方法，其中，所述第一預(yù)定位置和所述第二預(yù)定位置分別位于所述第一圖層上的兩個不同的位置。
5.根據(jù)權(quán)利要求1所述的方法，其中，在所述將第二圖層從所述第一預(yù)定位置移動至所述第一圖層之上的第二預(yù)定位置的步驟之后，所述方法還包括 當(dāng)用戶在頁面上的操作離開所述第一圖層時，隱藏所述第二圖層。
6.根據(jù)權(quán)利要求1-5中任一所述的方法，其中， 所述頁面以HTML格式編寫，所述第二圖層是所述第一圖層的子元素。
7.根據(jù)權(quán)利要求6中所述的方法，其中， 所述第一圖層和所述第二圖層為CSS圖層。
8.根據(jù)權(quán)利要求7所述的方法，其中， 所述隱藏所述第二圖層的步驟包括將所述第二圖層絕對定位在所述第一圖層中底部的不可見區(qū)域中。
9.根據(jù)權(quán)利要求6-8中任一所述的方法，其中，所述將所述第二圖層的位置從所述第一預(yù)定位置設(shè)置為所述第一圖層之上的第二預(yù)定位置的步驟包括 設(shè)置所述第二圖層的CSS樣式屬性，使所述第二圖層的位置屬性改變至所述第二預(yù)定位置。
10.根據(jù)權(quán)利要求6-9中任一所述的方法，所述當(dāng)用戶在頁面上的操作離開所述第一圖層時，隱藏所述第二圖層的步驟包括 通過設(shè)置所述第二圖層的CSS樣式屬性，使所述第二圖層處于所述第一圖層下方的不可見區(qū)域。
11.一種頁面顯示的設(shè)備，所述頁面包括第一圖層和與所述第一圖層相關(guān)聯(lián)的第二圖層，而且所述第二圖層隱藏顯示，所述設(shè)備包括 檢測模塊，用于檢測用戶在頁面上的操作位置，當(dāng)所述操作位置從所述第一圖層的范圍之外進入所述第一圖層的范圍之內(nèi)時，發(fā)送觸發(fā)在所述第一圖層之上疊加顯示所述第二圖層的消息；以及第二圖層呈現(xiàn)模塊，在接收到所述檢測模塊發(fā)送的觸發(fā)消息之后，適于逐步改變所述第二圖層的位置，直到所述第二圖層的位置達到所述第一圖層范圍內(nèi)的第一預(yù)定位置為止；使第二圖層停止移動達第一預(yù)定時間；以及將所述第二圖層的位置從所述第一預(yù)定位置設(shè)置為所述第一圖層之上的第二預(yù)定位置。
12.根據(jù)權(quán)利要求11所述的設(shè)備，其中，所述第二圖層處于位于所述第一圖層的底部的不可見區(qū)域中來隱藏顯示。
13.根據(jù)權(quán)利要求11所述的設(shè)備，其中，所述用戶在頁面上的操作位置從所述第一圖層的范圍之外進入所述第一圖層的范圍之內(nèi)通過將光標滑動到所述第一圖層上以及點擊所述第一圖層來實現(xiàn)。
14.根據(jù)權(quán)利要求11所述的設(shè)備，其中，所述第一預(yù)定位置和所述第二預(yù)定位置分別位于所述第一圖層上的兩個不同位置。
15.根據(jù)權(quán)利要求11所述的設(shè)備，還包括隱藏模塊，用于當(dāng)用戶在頁面上的操作離開所述第一圖層時，隱藏所述第二圖層。
16.根據(jù)權(quán)利要求11-15中任一所述的設(shè)備,其中， 所述頁面以HTML格式編寫，所述第二圖層是所述第一圖層的子元素。
17.根據(jù)權(quán)利要求16中所述的設(shè)備，其中， 所述第一圖層和所述第二圖層為CSS圖層。
18.根據(jù)權(quán)利要求17所述的設(shè)備，其中， 所述隱藏模塊進一步用于將所述第二圖層絕對定位在所述第一圖層中底部的不可見區(qū)域中。
19.根據(jù)權(quán)利要求16-18中任一所述的設(shè)備，其中， 第二圖層呈現(xiàn)模塊進一步用于通過設(shè)置所述第二圖層的CSS，使所述第二圖層的位置屬性改變至所述第二預(yù)定位置。
20.根據(jù)權(quán)利要求17所述的設(shè)備，所述隱藏模塊進一步用于通過設(shè)置所述第二圖層的CSS樣式屬性，使所述第二圖層處于所述第一圖層下方的不可見區(qū)域。
全文摘要
本發(fā)明公開了一種頁面顯示的方法及設(shè)備，其中頁面包括第一圖層和與第一圖層相關(guān)聯(lián)的第二圖層，且第二圖層隱藏顯示，方法包括步驟檢測用戶在頁面上的操作位置，當(dāng)操作位置從第一圖層的范圍之外進入第一圖層的范圍之內(nèi)時，觸發(fā)在第一圖層之上疊加顯示第二圖層；逐步改變第二圖層的位置，直到第二圖層的位置達到第一圖層范圍內(nèi)的第一預(yù)定位置為止；使第二圖層停止移動達第一預(yù)定時間；以及將第二圖層的位置從第一預(yù)定位置設(shè)置為第一圖層之上的第二預(yù)定位置。降低第二圖層在第一圖層上的疊加顯示過程的跳躍性，從而改善用戶的視覺體驗。
文檔編號G06F17/30GK103034410SQ20121053028
公開日2013年4月10日 申請日期2012年12月10日 優(yōu)先權(quán)日2012年12月10日
發(fā)明者曾軼, 王海, 黃歡 申請人:北京奇虎科技有限公司, 奇智軟件(北京)有限公司