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

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


通過閱讀下文優(yōu)選實(shí)施方式的詳細(xì)描述，各種其他的優(yōu)點(diǎn)和益處對(duì)于本領(lǐng)域普通技術(shù)人員將變得清楚明了。附圖僅用于示出優(yōu)選實(shí)施方式的目的，而并不認(rèn)為是對(duì)本發(fā)明的限制。而且在整個(gè)附圖中，用相同的參考符號(hào)表示相同的部件。在附圖中圖1示出了根據(jù)本發(fā)明一個(gè)實(shí)施例的用于顯示頁面的方法的流程圖；以及圖2示出了根據(jù)本發(fā)明一個(gè)實(shí)施例的用于顯示頁面的設(shè)備的框圖。
具體實(shí)施例方式下面將參照附圖更詳細(xì)地描述本公開的示例性實(shí)施例。雖然附圖中顯示了本公開的示例性實(shí)施例，然而應(yīng)當(dāng)理解，可以以各種形式實(shí)現(xiàn)本公開而不應(yīng)被這里闡述的實(shí)施例所限制。相反，提供這些實(shí)施例是為了能夠更透徹地理解本公開，并且能夠?qū)⒈竟_的范圍完整的傳達(dá)給本領(lǐng)域的技術(shù)人員。隨著互聯(lián)網(wǎng)應(yīng)用的快速發(fā)展，一些頁面交互的技術(shù)也在不斷進(jìn)步，越來越多的頁面交互采用諸如CSS (Cascading Style Sheet,級(jí)聯(lián)樣式表)，Javascript代碼等技術(shù)，以實(shí)現(xiàn)在網(wǎng)頁上呈現(xiàn)具有吸引力的界面。在現(xiàn)有的利用圖層進(jìn)行頁面交互的設(shè)計(jì)中，首先在頁面的界面上顯示第一圖層，并且在第一圖層中可顯示某個(gè)產(chǎn)品的圖片，當(dāng)用戶滑動(dòng)鼠標(biāo)到該第一圖層中時(shí)，會(huì)在第一圖層上疊加顯示第二圖層，并且在第二圖層中顯示對(duì)第一圖層中的產(chǎn)品進(jìn)一步描述的內(nèi)容。然而，在上述圖層疊加方式中，通常是在觸發(fā)疊加事件后，馬上在第一圖層上疊加顯示第二圖層。由于在疊加顯示第二圖層的過程中缺乏中間過渡過程，導(dǎo)致疊加顯示第二圖層的視覺跳躍性較強(qiáng)，影響了用戶體驗(yàn)。為此，本發(fā)明提出了一種用于顯示頁面的方法和設(shè)備。本發(fā)明提出的用于顯示頁面的方法主要是，在第一圖層之上疊加顯示第二圖層時(shí)，首先逐步改變第二圖層的位置，然后當(dāng)?shù)诙D層的位置達(dá)到第一圖層范圍內(nèi)的第一預(yù)定位置時(shí)，使第二圖層停止移動(dòng)達(dá)第一預(yù)定時(shí)間，最后再將第二圖層的位置從第一預(yù)定位置設(shè)置為第一圖層之上的第二預(yù)定位置，從而實(shí)現(xiàn)第二圖層以平滑的方式疊加顯示在第一圖層上，由此減少第二圖層在第一圖層上疊加顯示過程中的跳躍性，改善用戶的視覺體驗(yàn)。下面結(jié)合圖1具體說明根據(jù)本發(fā)明一個(gè)實(shí)施例的、適于解決上述問題的用于顯示頁面的方法100的流程圖。如圖1所示，本發(fā)明的實(shí)施例的用于顯示頁面的方法100始于步驟S110，在步驟SllO中，設(shè)置第一圖層以及與第一圖層相關(guān)聯(lián)的第二圖層?？蛇x地，在以HTML格式編寫的頁面上設(shè)置第一圖層和與第一圖層相關(guān)聯(lián)的第二圖層，第一圖層和第二圖層中可以包括文本、圖片、表格、插件中的任意一個(gè)或多個(gè)。上述相關(guān)聯(lián)可以是指第一圖層中的文本、圖片、表格或者插件與第二圖層中的文本、圖片、表格或插件相關(guān)聯(lián)，例如第二圖層中的圖片所顯示的內(nèi)容是對(duì)第一圖層中的圖片所顯示內(nèi)容的進(jìn)一步解釋說明。根據(jù)本發(fā)明的一個(gè)實(shí)施例，第一圖層和第二圖層為CSS圖層，即第一圖層和第二圖層可以用HTML中的CSS代碼來實(shí)現(xiàn)。例如第一圖層和第二圖層的CSS代碼如下(I)第一圖層(layer_A)的初始CSS代碼為#layer_A{display:1nline-block；float:left ；height:164px;margin-right 27px;overflow:hidden;position:relative;width:226px;}其中，layer_A的CSS樣式屬性包括display (顯示)inline_block (對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞)、float (浮動(dòng))left (左浮動(dòng))、height (高度)164px (高度 164px)、margin-right (右邊緣)27px (距離右邊 27px)、overflow (溢出)hidden (隱藏溢出)、position (位置)relative (相對(duì)定位)、width (寬度)226px(寬度226px)。通過第一圖層(layer_A)的四個(gè)CSS樣式屬性height、width、overflow和position，為第二圖層(layer_B)構(gòu)造了一個(gè)封閉的、相對(duì)定位的父元素，該父元素為第一圖層(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 (塊對(duì)象);height (高度)136px (高度 136px); left (左邊距)14px (距離左邊 14px); position(位置):absolute (絕對(duì)定位);top (頂邊距)178px (距離頂部 178px); width (寬度)198px(寬度 198px) ; z-1ndex (z 軸方向高度):100 (z-1ndex 屬性值 100)。第二圖層(layer_B)的position設(shè)為絕對(duì)定位(absolute),而且第二圖層(layer_B)的top的值比第一圖層(layer_A)的height的值更大,使得第二圖層(layer_B)絕對(duì)定位在第一圖層(layer_A)中底部的不可見區(qū)域。根據(jù)本發(fā)明的一個(gè)實(shí)施例，第二圖層是第一圖層的一個(gè)子元素，當(dāng)?shù)诙D層和第一圖層不發(fā)生疊加時(shí)，顯示第一圖層。當(dāng)發(fā)生疊加時(shí)，第二圖層將疊加在第一圖層上，此時(shí)第一圖層和第二圖層可展示為兩個(gè)點(diǎn)擊按鈕，用戶通過點(diǎn)擊第一圖層和第二圖層可分別鏈接到不同的網(wǎng)址。下面介紹第一圖層(layer_A)和第二圖層(layer_B)設(shè)置在頁面中的HTML代碼
權(quán)利要求
1.一種用于顯示頁面的方法，所述頁面包括第一圖層和與所述第一圖層相關(guān)聯(lián)的第二圖層，且所述第二圖層隱藏顯示，所述方法包括步驟 檢測(cè)用戶在頁面上的操作位置，當(dāng)所述操作位置從所述第一圖層的范圍之外進(jìn)入所述第一圖層的范圍之內(nèi)時(shí)，觸發(fā)在所述第一圖層之上疊加顯示所述第二圖層； 逐步改變所述第二圖層的位置，直到所述第二圖層的位置達(dá)到所述第一圖層范圍內(nèi)的第一預(yù)定位置為止； 使所述第二圖層停止移動(dòng)達(dá)第一預(yù)定時(shí)間；以及 將所述第二圖層的位置從所述第一預(yù)定位置設(shè)置為所述第一圖層之上的第二預(yù)定位置； 其中，在所述將第二圖層從所述第一預(yù)定位置移動(dòng)至所述第一圖層之上的第二預(yù)定位置的步驟之后，所述方法還包括然后當(dāng)用戶在頁面上的操作離開所述第一圖層時(shí)，隱藏所述第二圖層。
2.根據(jù)權(quán)利要求1所述的方法，其中，所述第二圖層處于位于所述第一圖層的底部的不可見區(qū)域中來隱藏顯示。
3.根據(jù)權(quán)利要求1所述的方法，其中，所述用戶在頁面上的操作位置從所述第一圖層的范圍之外進(jìn)入所述第一圖層的范圍之內(nèi)通過將光標(biāo)滑動(dòng)到所述第一圖層上和/或點(diǎn)擊所述第一圖層來實(shí)現(xiàn)。
4.根據(jù)權(quán)利要求1所述的方法，其中，所述第一預(yù)定位置和所述第二預(yù)定位置分別位于所述第一圖層上的兩個(gè)不同的位置。
5.根據(jù)權(quán)利要求1-4中任一所述的方法，其中， 所述頁面以HTML格式編寫，所述第二圖層是所述第一圖層的子元素。
6.根據(jù)權(quán)利要求5中所述的方法，其中， 所述第一圖層和所述第二圖層為CSS圖層。
7.根據(jù)權(quán)利要求6所述的方法，其中， 所述隱藏所述第二圖層的步驟包括將所述第二圖層絕對(duì)定位在所述第一圖層中底部的不可見區(qū)域中。
8.根據(jù)權(quán)利要求5-7中任一所述的方法，其中，所述將所述第二圖層的位置從所述第一預(yù)定位置設(shè)置為所述第一圖層之上的第二預(yù)定位置的步驟包括 設(shè)置所述第二圖層的CSS樣式屬性，使所述第二圖層的位置屬性改變至所述第二預(yù)定位置。
9.根據(jù)權(quán)利要求5-8中任一所述的方法，所述當(dāng)用戶在頁面上的操作離開所述第一圖層時(shí)，隱藏所述第二圖層的步驟包括 通過設(shè)置所述第二圖層的CSS樣式屬性，使所述第二圖層處于所述第一圖層下方的不可見區(qū)域。
10.一種用于顯示頁面的設(shè)備，所述頁面包括第一圖層和與所述第一圖層相關(guān)聯(lián)的第二圖層，而且所述第二圖層隱藏顯示，所述設(shè)備包括 檢測(cè)模塊，用于檢測(cè)用戶在頁面上的操作位置，當(dāng)所述操作位置從所述第一圖層的范圍之外進(jìn)入所述第一圖層的范圍之內(nèi)時(shí)，發(fā)送觸發(fā)在所述第一圖層之上疊加顯示所述第二圖層的消息；以及第二圖層呈現(xiàn)模塊，在接收到所述檢測(cè)模塊發(fā)送的觸發(fā)消息之后，適于逐步改變所述第二圖層的位置，直到所述第二圖層的位置達(dá)到所述第一圖層范圍內(nèi)的第一預(yù)定位置為止；使第二圖層停止移動(dòng)達(dá)第一預(yù)定時(shí)間；以及將所述第二圖層的位置從所述第一預(yù)定位置設(shè)置為所述第一圖層之上的第二預(yù)定位置；隱藏模塊，用于當(dāng)用戶在頁面上的操作離開所述第一圖層時(shí)，隱藏所述第二圖層。
11.根據(jù)權(quán)利要求10所述的設(shè)備，其中，所述第二圖層處于位于所述第一圖層的底部的不可見區(qū)域中來隱藏顯示。
12.根據(jù)權(quán)利要求10所述的設(shè)備，其中，所述用戶在頁面上的操作位置從所述第一圖層的范圍之外進(jìn)入所述第一圖層的范圍之內(nèi)通過將光標(biāo)滑動(dòng)到所述第一圖層上以及點(diǎn)擊所述第一圖層來實(shí)現(xiàn)。
13.根據(jù)權(quán)利要求10所述的設(shè)備，其中，所述第一預(yù)定位置和所述第二預(yù)定位置分別位于所述第一圖層上的兩個(gè)不同位置。
14.根據(jù)權(quán)利要求10-13中任一所述的設(shè)備，其中，所述頁面以HTML格式編寫，所述第二圖層是所述第一圖層的子元素。
15.根據(jù)權(quán)利要求14中所述的設(shè)備，其中，所述第一圖層和所述第二圖層為CSS圖層。
16.根據(jù)權(quán)利要求15所述的設(shè)備，其中，所述隱藏模塊進(jìn)一步用于將所述第二圖層絕對(duì)定位在所述第一圖層中底部的不可見區(qū)域中。
17.根據(jù)權(quán)利要求14-16中任一所述的設(shè)備，其中，第二圖層呈現(xiàn)模塊進(jìn)一步用于通過設(shè)置所述第二圖層的CSS，使所述第二圖層的位置屬性改變至所述第二預(yù)定位置。
18.根據(jù)權(quán)利要求15所述的設(shè)備，所述隱藏模塊進(jìn)一步用于通過設(shè)置所述第二圖層的 CSS樣式屬性，使所述第二圖層處于所述第一圖層下方的不可見區(qū)域。
全文摘要
本發(fā)明公開了一種用于顯示頁面的方法和設(shè)備，其中頁面包括第一圖層和與第一圖層相關(guān)聯(lián)的第二圖層，且第二圖層隱藏顯示，設(shè)備包括檢測(cè)模塊，用于檢測(cè)用戶在頁面上的操作位置；以及第二圖層呈現(xiàn)模塊，在接收到所述檢測(cè)模塊發(fā)送的觸發(fā)消息之后，適于逐步改變所述第二圖層的位置，直到所述第二圖層的位置達(dá)到所述第一圖層范圍內(nèi)的第一預(yù)定位置為止；使第二圖層停止移動(dòng)達(dá)第一預(yù)定時(shí)間；以及將所述第二圖層的位置從所述第一預(yù)定位置設(shè)置為所述第一圖層之上的第二預(yù)定位置；隱藏模塊，用于當(dāng)用戶在頁面上的操作離開所述第一圖層時(shí)，隱藏所述第二圖層。降低第二圖層在第一圖層上的疊加顯示過程的跳躍性，從而改善用戶的視覺體驗(yàn)。
文檔編號(hào)G06F3/0481GK103019516SQ20121053062
公開日2013年4月3日 申請(qǐng)日期2012年12月10日 優(yōu)先權(quán)日2012年12月10日
發(fā)明者曾軼, 王海, 黃歡 申請(qǐng)人:北京奇虎科技有限公司, 奇智軟件(北京)有限公司