專利名稱：一種在網(wǎng)頁(yè)中動(dòng)態(tài)改變層的實(shí)現(xiàn)方法
技術(shù)領(lǐng)域：
本發(fā)明涉及計(jì)算機(jī)及通信技術(shù)領(lǐng)域，尤其涉及一種在網(wǎng)頁(yè)中動(dòng)態(tài)改變層的實(shí)現(xiàn)方法。
背景技術(shù)：
隨著互聯(lián)網(wǎng)的迅速發(fā)展，網(wǎng)站的展示方式也日新月異，其中網(wǎng)頁(yè)的展示方式更是層出不窮。一般情況下，網(wǎng)頁(yè)的展示是基于超文本標(biāo)記性語(yǔ)言(HTML語(yǔ)言)實(shí)現(xiàn)的，HTML中的div標(biāo)簽是渲染HTML元素的一種容器，常用作為網(wǎng)頁(yè)中的層，可以展示更豐富的效果。在網(wǎng)頁(yè)設(shè)計(jì)中，經(jīng)常會(huì)用超文本標(biāo)記性語(yǔ)言(HTML語(yǔ)言)中的標(biāo)簽(即<div></div>標(biāo)簽，或稱div標(biāo)簽)對(duì)其中的HTML元素進(jìn)行渲染，從而實(shí)現(xiàn)更好的展示效果。
目前在設(shè)計(jì)網(wǎng)頁(yè)過(guò)程中，都只是對(duì)div標(biāo)簽進(jìn)行簡(jiǎn)單的增加、刪除，以及對(duì)其可見(jiàn)性顯示與否做出動(dòng)態(tài)或靜態(tài)的選擇，而且大多情況下層的長(zhǎng)寬都是固定的，不能動(dòng)態(tài)的改變；另外，多數(shù)情況下也沒(méi)有使用層的樣式或者僅固定層的樣式，不僅樣式單一，而且也不能動(dòng)態(tài)的改變。

發(fā)明內(nèi)容
本發(fā)明提供一種在網(wǎng)頁(yè)中動(dòng)態(tài)改變層的實(shí)現(xiàn)方法，用以解決現(xiàn)有技術(shù)在展示網(wǎng)頁(yè)時(shí)存在不能動(dòng)態(tài)改變層的展示效果的問(wèn)題。
為解決上述問(wèn)題，本發(fā)明提供以下技術(shù)方案一種動(dòng)態(tài)改變網(wǎng)頁(yè)中的層的方法，用于在具有信息處理能力的裝置中控制網(wǎng)頁(yè)的頁(yè)面效果；包括如下步驟所述裝置中的處理器讀取包含超文本標(biāo)記性語(yǔ)言(HTML)文件生成網(wǎng)頁(yè)并展示，其中該文件包含有用于定義網(wǎng)頁(yè)中層的屬性的標(biāo)簽；
捕獲用戶在所述網(wǎng)頁(yè)的層上所觸發(fā)的操作事件，并實(shí)時(shí)計(jì)算出層屬性的當(dāng)前值；將所述當(dāng)前值傳遞給所述標(biāo)簽中對(duì)應(yīng)的屬性，并在展示的網(wǎng)頁(yè)中反映層的屬性改變后的效果。
根據(jù)上述方法在所述HTML文件中定義一個(gè)用于識(shí)別所述標(biāo)簽的標(biāo)識(shí)，在傳遞當(dāng)前值時(shí)通過(guò)該標(biāo)識(shí)定位到相應(yīng)的屬性。
通過(guò)給參數(shù)賦值的方式傳送所述當(dāng)前值，或者，通過(guò)直接修改所述標(biāo)簽中的屬性值的方式傳遞當(dāng)前值。
所述屬性至少包括層的位置屬性、層的大小屬性和層的樣式屬性之一。
所述屬性包括層的樣式屬性時(shí)，在網(wǎng)頁(yè)上提供一個(gè)可選擇層樣式的列表，該列表中的每一項(xiàng)對(duì)應(yīng)一個(gè)用于定義層樣式的層疊樣式表單(CSS)文件。
選擇所述列表中的表項(xiàng)后將對(duì)應(yīng)的CSS文件的路徑作為層的樣式屬性值傳遞到所述標(biāo)簽。
本發(fā)明通過(guò)實(shí)時(shí)捕獲用戶在網(wǎng)頁(yè)的層上的操作并計(jì)算出層當(dāng)前的屬性值，然后傳遞給div標(biāo)簽中定義的層的屬性，從而動(dòng)態(tài)的改變層。本發(fā)明不僅使頁(yè)面展示效果更具有靈活性，而且也增強(qiáng)了用戶的交互感和對(duì)用戶的吸引力。


圖1為本發(fā)明中動(dòng)態(tài)改變網(wǎng)頁(yè)中層的位置、大小的流程圖；圖2為本發(fā)明中動(dòng)態(tài)改變網(wǎng)頁(yè)中層的樣式的流程圖。
具體實(shí)施例方式
在計(jì)算機(jī)等具有信息處理能力的裝置中用HTML語(yǔ)言定義完網(wǎng)頁(yè)后，由處理器讀取HTML文件并通過(guò)解釋文件中的語(yǔ)句來(lái)最終展示頁(yè)面。為了能夠動(dòng)態(tài)的改變網(wǎng)頁(yè)中的層，本發(fā)明通過(guò)在定義網(wǎng)頁(yè)的HTML文件中用標(biāo)簽定義網(wǎng)頁(yè)中層的屬性，實(shí)時(shí)捕獲用戶在所述網(wǎng)頁(yè)的層上所觸發(fā)的操作事件，并實(shí)時(shí)計(jì)算出層屬性的當(dāng)前值；將該當(dāng)前值傳遞給所述標(biāo)簽中對(duì)應(yīng)的屬性并在展示的網(wǎng)頁(yè)中反映層的屬性改變后的效果。
實(shí)施例一本實(shí)施例以動(dòng)態(tài)改變層的位置和大小為例進(jìn)行詳細(xì)說(shuō)明在定義網(wǎng)頁(yè)的HTML文件中增加用于定義層的<div></div>標(biāo)簽，(也可以使用其他標(biāo)識(shí)答，如<span></span>標(biāo)簽)在這個(gè)標(biāo)簽中用HTML語(yǔ)言定義層的大小和位置屬性，初始時(shí)可以給這些屬性賦默認(rèn)值。為了能夠區(qū)別該標(biāo)簽與其他用途的標(biāo)簽，給該<div></div>標(biāo)簽定義一個(gè)唯一標(biāo)識(shí)ID，即通過(guò)該ID能夠定位到文件中對(duì)應(yīng)的標(biāo)簽。
為了能夠?qū)ξ募卸x的層的屬性值進(jìn)行操作，在捕獲到網(wǎng)頁(yè)上的層被改變時(shí)，根據(jù)ID標(biāo)識(shí)定位文件中定義層的div></div>標(biāo)簽，然后將改變后的屬性值傳遞到該標(biāo)簽中對(duì)應(yīng)的屬性。
對(duì)于層的動(dòng)態(tài)移動(dòng)當(dāng)頁(yè)面產(chǎn)生后，用戶的鼠標(biāo)滑到層上觸發(fā)事件onMouseOver()，這時(shí)當(dāng)鼠標(biāo)按下(onMouseDonw())，系統(tǒng)進(jìn)入計(jì)算狀態(tài)，當(dāng)用戶拖拽實(shí)時(shí)系統(tǒng)根據(jù)鼠標(biāo)的位置(x，y)坐標(biāo)值計(jì)算出層的位置(Left，Top)的值；當(dāng)用戶停止拖拽并松開(kāi)鼠標(biāo)時(shí)(onMouseUP())，系統(tǒng)離開(kāi)計(jì)算狀態(tài)。
對(duì)于層的動(dòng)態(tài)放縮當(dāng)頁(yè)面產(chǎn)生后，用戶的鼠標(biāo)滑到層的四周的邊緣上觸發(fā)事件onMouseOver()，這時(shí)當(dāng)鼠標(biāo)按下(onMouseDonw())，系統(tǒng)進(jìn)入計(jì)算狀態(tài)；當(dāng)用戶拖拽實(shí)時(shí)系統(tǒng)根據(jù)滑鼠的位置(x，y)的坐標(biāo)值，然后計(jì)算出層的長(zhǎng)寬(Width，Height)；當(dāng)用戶停止拖拽并松開(kāi)鼠標(biāo)時(shí)(onMouseUP())系統(tǒng)離開(kāi)計(jì)算狀態(tài)。
參閱圖1所示，動(dòng)態(tài)改變網(wǎng)頁(yè)中層的位置、大小的處理過(guò)程如下步驟1、計(jì)算裝置中的處理器讀取并解釋HTML文件，在顯示裝置上產(chǎn)生網(wǎng)頁(yè)頁(yè)面。
步驟2、用戶的鼠標(biāo)滑到層上觸發(fā)事件onMouseOver()，系統(tǒng)捕獲對(duì)頁(yè)面所進(jìn)行的操作，如移動(dòng)，拖拽等，并根據(jù)鼠標(biāo)的位置(x，y)坐標(biāo)值，實(shí)時(shí)地計(jì)算出層當(dāng)前的位置(Left，Top)的值或長(zhǎng)寬(Width，Height)的值。
步驟3、根據(jù)標(biāo)識(shí)ID定位到HTML文件中的定義層的<div></div>標(biāo)簽，將計(jì)算出的當(dāng)前值傳遞到該標(biāo)簽中定義的屬性。
傳遞屬性值的可以采用給參數(shù)賦值的方式傳遞，也可以通過(guò)直接修改所述標(biāo)簽中的屬性值的方式傳遞。
步驟4、在鼠標(biāo)采樣值動(dòng)態(tài)改變時(shí)，在該頁(yè)面中反映層計(jì)算后的屬性值，即展示層的屬性改變后的效果。
根據(jù)實(shí)際需要，可以僅實(shí)現(xiàn)層位置的動(dòng)態(tài)變化或大小的動(dòng)態(tài)變化，也可以同時(shí)實(shí)現(xiàn)層位置和大小的動(dòng)態(tài)變化。
實(shí)施例二本實(shí)施例以動(dòng)態(tài)改變層的樣式為例進(jìn)行詳細(xì)說(shuō)明將網(wǎng)頁(yè)中層所需要的樣式設(shè)計(jì)素材定義到一個(gè)層疊樣式表單(CascadingStyle Sheets，CSS)文件，每一種樣式定義到一個(gè)CSS文件中。根據(jù)需要可定義多個(gè)CSS文件。
在定義網(wǎng)頁(yè)的HTML文件中增加用于定義層的<div></div>標(biāo)簽，在這個(gè)標(biāo)簽中用HTML語(yǔ)言定義層的樣式，初始時(shí)可以指定一個(gè)默認(rèn)樣式，將該默認(rèn)樣式對(duì)應(yīng)的CSS文件的路徑和文件名賦值給屬性。為了能夠區(qū)別該標(biāo)簽與其他用途的標(biāo)簽，給該<div></div>標(biāo)簽定義一個(gè)唯一標(biāo)識(shí)ID，即通過(guò)該ID能夠定位到文件中對(duì)應(yīng)的標(biāo)簽。
在產(chǎn)生網(wǎng)頁(yè)時(shí)，產(chǎn)生一個(gè)選擇列表，在該列表中包含所有定義的層樣式的CSS文件。當(dāng)用戶的鼠標(biāo)滑到特定的區(qū)域時(shí)，系統(tǒng)自動(dòng)列出選擇列表中的所有選擇項(xiàng)，用戶選擇自己想要的樣式后，系統(tǒng)將文件的路徑和文件名傳遞到HTML文件的<div></div>標(biāo)簽所定義的樣式屬性。
參閱圖2所示，動(dòng)態(tài)改變網(wǎng)頁(yè)中層的樣式的處理過(guò)程如下
步驟101、計(jì)算裝置中的處理器讀取并解釋HTML文件，在顯示裝置上產(chǎn)生網(wǎng)頁(yè)頁(yè)面，該頁(yè)面包含一個(gè)層樣式選擇列表。
步驟102、用戶的鼠標(biāo)滑到層上的特定區(qū)域時(shí)，系統(tǒng)列表選擇列表中所有可選項(xiàng)，并獲取用戶選擇的CSS文件和該CSS文件對(duì)應(yīng)的路徑。
步驟103、根據(jù)標(biāo)識(shí)ID定位到HTML文件中的定義層的div></div>標(biāo)簽，將CSS的路徑傳遞到該標(biāo)簽中定義的層的樣式屬性。
步驟104、在刷新網(wǎng)頁(yè)頁(yè)面時(shí)，在該頁(yè)面中反映層改變后的層樣式。
雖然上述對(duì)動(dòng)態(tài)改變網(wǎng)頁(yè)中層的位置、大小以及動(dòng)態(tài)改變網(wǎng)頁(yè)中層的樣式分別進(jìn)行說(shuō)明，但根據(jù)實(shí)際需要，可以同時(shí)實(shí)現(xiàn)層位置、大小和樣式的動(dòng)態(tài)變化；同理，上述方法也同樣適當(dāng)于動(dòng)態(tài)改變層的其他屬性。
采用本發(fā)明，可以動(dòng)態(tài)的改變HTML文件中<div>標(biāo)簽或其他標(biāo)簽定義的網(wǎng)頁(yè)的層的屬性來(lái)改變網(wǎng)頁(yè)的頁(yè)面效果，使之與用戶動(dòng)態(tài)交互，能夠增強(qiáng)用戶的交互感，增加對(duì)用戶的吸引力，也使頁(yè)面設(shè)計(jì)師有更廣泛的空間可以發(fā)揮。
顯然，本領(lǐng)域的技術(shù)人員可以對(duì)本發(fā)明進(jìn)行各種改動(dòng)和變型而不脫離本發(fā)明的精神和范圍。這樣，倘若本發(fā)明的這些修改和變型屬于本發(fā)明權(quán)利要求及其等同技術(shù)的范圍之內(nèi)，則本發(fā)明也意圖包含這些改動(dòng)和變型在內(nèi)。
權(quán)利要求
1.一種在網(wǎng)頁(yè)中動(dòng)態(tài)改變層的實(shí)現(xiàn)方法，用于在具有信息處理能力的裝置中控制網(wǎng)頁(yè)的頁(yè)面展示效果；其特征在于，包括如下步驟所述裝置中的處理器讀取包含超文本標(biāo)記性語(yǔ)言(HTML)文件生成網(wǎng)頁(yè)并展示，其中該文件包含有用于定義網(wǎng)頁(yè)中層的屬性的標(biāo)簽；捕獲用戶在所述網(wǎng)頁(yè)的層上所觸發(fā)的操作事件，并實(shí)時(shí)計(jì)算出層屬性的當(dāng)前值；將所述當(dāng)前值傳遞給所述標(biāo)簽中對(duì)應(yīng)的屬性，并在展示的網(wǎng)頁(yè)中反映層的屬性改變后的效果。
2.如權(quán)利要求1所述的方法，其特征在于，在所述HTML文件中定義一個(gè)用于識(shí)別所述標(biāo)簽的標(biāo)識(shí)，在傳遞當(dāng)前值時(shí)通過(guò)該標(biāo)識(shí)定位到相應(yīng)的屬性。
3.如權(quán)利要求2所述的方法，其特征在于，通過(guò)給參數(shù)賦值的方式傳遞所述當(dāng)前值，或者，通過(guò)直接修改所述標(biāo)簽中的屬性值的方式傳遞當(dāng)前值。
4.如權(quán)利要求1、2或3所述的方法，其特征在于，所述屬性至少包括層的位置屬性、層的大小屬性和層的樣式屬性之一。
5.如權(quán)利要求4所述的方法，其特征在于，所述屬性包括層的樣式屬性時(shí)，在網(wǎng)頁(yè)上提供一個(gè)可選擇層樣式的列表，該列表中的每一項(xiàng)對(duì)應(yīng)一個(gè)用于定義層樣式的層疊樣式表單(CSS)文件。
6.如權(quán)利要求5所述的方法，其特征在于，選擇所述列表中的表項(xiàng)后將對(duì)應(yīng)的CSS文件的路徑和文件名作為層的樣式屬性值傳遞到所述標(biāo)簽。
全文摘要
本發(fā)明公開(kāi)了一種在網(wǎng)頁(yè)中動(dòng)態(tài)改變層的實(shí)現(xiàn)方法，用于在具有信息處理能力的裝置中控制網(wǎng)頁(yè)的頁(yè)面展示效果；該步驟方法由裝置中的處理器讀取包含超文本標(biāo)記性語(yǔ)言(HTML)文件生成網(wǎng)頁(yè)并展示，其中該文件包含有用于定義網(wǎng)頁(yè)中層的屬性的標(biāo)簽；捕獲用戶在所述網(wǎng)頁(yè)的層上所觸發(fā)的操作事件，并實(shí)時(shí)計(jì)算出層屬性的當(dāng)前值；將層屬性的當(dāng)前值傳遞給所述標(biāo)簽中對(duì)應(yīng)的屬性，并在展示的網(wǎng)頁(yè)中反映層的屬性改變后的效果。
文檔編號(hào)G06F17/30GK1877571SQ20051007486
公開(kāi)日2006年12月13日 申請(qǐng)日期2005年6月7日 優(yōu)先權(quán)日2005年6月7日
發(fā)明者胡振勇, 張劍, 林浩, 林松濤, 馬丁, 陳妍 申請(qǐng)人:騰訊科技(深圳)有限公司