一種html文件實(shí)現(xiàn)顯示瀏覽器窗口內(nèi)容的方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及html領(lǐng)域，特別涉及一種html文件實(shí)現(xiàn)顯示瀏覽器窗口內(nèi)容的方法。
【背景技術(shù)】
[0002]—般的瀏覽器窗口顯示需要通過(guò)使用用戶點(diǎn)擊的方式，或者通過(guò)其他的方式進(jìn)行操作，然而，卻沒(méi)有一種通過(guò)自動(dòng)操作的方式實(shí)現(xiàn)該操作。

【發(fā)明內(nèi)容】

[0003]基于此，提供了一種html文件實(shí)現(xiàn)顯示瀏覽器窗口內(nèi)容的方法。
[0004]—種html文件實(shí)現(xiàn)顯示瀏覽器窗口內(nèi)容的方法，所述方法包括:
接收用戶輸入的用于顯示窗口內(nèi)容的移動(dòng)軌跡；
修改html文件中對(duì)應(yīng)于瀏覽器窗口內(nèi)容的CSS代碼，以瀏覽器打開(kāi)所述窗口內(nèi)容；
修改CSS代碼中窗口內(nèi)容的配置數(shù)據(jù)，以顯示窗口內(nèi)容和浮動(dòng)欄。
[0005]上述方法，通過(guò)一種html文件實(shí)現(xiàn)顯示瀏覽器窗口內(nèi)容的方法，所述方法包括:接收用戶輸入的用于顯示窗口內(nèi)容的移動(dòng)軌跡;修改html文件中對(duì)應(yīng)于瀏覽器窗口內(nèi)容的CSS代碼，以瀏覽器打開(kāi)所述窗口內(nèi)容;修改CSS代碼中窗口內(nèi)容的配置數(shù)據(jù)，以顯示窗口內(nèi)容和浮動(dòng)欄。解決了需要人工進(jìn)行操作的問(wèn)題。
【附圖說(shuō)明】
[0006]圖1為一實(shí)施例中html文件實(shí)現(xiàn)顯示瀏覽器窗口內(nèi)容的方法的流程圖。
[0007]圖2為另一實(shí)施例中html文件實(shí)現(xiàn)顯示瀏覽器窗口內(nèi)容裝置的模塊框圖。
[0008]圖3為又一實(shí)施例中html文件實(shí)現(xiàn)顯示瀏覽器窗口內(nèi)容的裝置系統(tǒng)框圖。
【具體實(shí)施方式】
[0009]在本實(shí)施例中，術(shù)語(yǔ)窗口內(nèi)容一般指代進(jìn)入網(wǎng)頁(yè)時(shí)的網(wǎng)頁(yè)顯示內(nèi)容。浮動(dòng)欄指代設(shè)置隱藏在網(wǎng)頁(yè)側(cè)邊的內(nèi)容。導(dǎo)航塊指代浮動(dòng)欄滑出狀態(tài)下，設(shè)置在窗口內(nèi)容上面的導(dǎo)航塊。
[0010]請(qǐng)參照?qǐng)D1，html文件實(shí)現(xiàn)顯示瀏覽器窗口內(nèi)容的方法，該方法包括:
SlOl:配置浮動(dòng)欄的第一屬性數(shù)據(jù)和窗口內(nèi)容的第二屬性數(shù)據(jù)，以使該浮動(dòng)欄處于隱藏狀態(tài)，該窗口內(nèi)容處于可運(yùn)動(dòng)狀態(tài)；
在本實(shí)施例中，將窗口內(nèi)容視為被一個(gè)div盒子包裹，浮動(dòng)欄被另一個(gè)div盒子包裹，窗口內(nèi)容和浮動(dòng)欄共同被一個(gè)用于顯示網(wǎng)頁(yè)的窗口的寬度一致的div包裹。網(wǎng)頁(yè)的文檔結(jié)構(gòu)中有一父節(jié)點(diǎn)，則該窗口內(nèi)容、浮動(dòng)欄和導(dǎo)航塊均為該父節(jié)點(diǎn)的子節(jié)點(diǎn)。其中，在CSS源代碼中，服務(wù)器后端中的關(guān)于該父節(jié)點(diǎn)和子節(jié)點(diǎn)的結(jié)構(gòu)化代碼示例如下:
其中，父節(jié)點(diǎn)(id=〃 op-wrap 〃的div)設(shè)置寬度為100%，使其與瀏覽器視口寬度一樣，設(shè)置超出的為隱藏狀態(tài)。[ΟΟ??] 需要說(shuō)明的是，浮動(dòng)欄(id=〃 ορ-aside"的div)設(shè)置為固定定位，浮動(dòng)欄的right屬性的數(shù)值為負(fù)的本身寬度值，層級(jí)設(shè)置為最高。假設(shè)浮動(dòng)欄寬度為450px，該浮動(dòng)欄的CSS代碼如下:
服務(wù)器后端配置浮動(dòng)欄的第一屬性數(shù)據(jù)主要包括right屬性的數(shù)據(jù)和位置屬性的數(shù)據(jù)(posit1n)，在該實(shí)施例中，浮動(dòng)欄的位置屬性的值為fixed，該浮動(dòng)欄的位置固定設(shè)置，該浮動(dòng)欄寬度為450px，浮動(dòng)欄的第一屬性數(shù)據(jù)主要包括為(right:-450px; pos it 1n:fixed)，該浮動(dòng)欄在網(wǎng)頁(yè)中處于隱藏狀態(tài)。
[0012]該窗口內(nèi)容位于網(wǎng)頁(yè)的左側(cè)，并且位置為相對(duì)定位，處于可運(yùn)動(dòng)狀態(tài)。
[0013]S102:讀取用戶的操作指令；
在步驟S102中，當(dāng)網(wǎng)頁(yè)所在為PC終端，則用戶的操作指令具體可為通過(guò)鼠標(biāo)滑動(dòng)浮動(dòng)欄，單次點(diǎn)擊浮動(dòng)欄、雙擊浮動(dòng)欄、拖曳浮動(dòng)欄或者全選浮動(dòng)欄。當(dāng)網(wǎng)頁(yè)所在為移動(dòng)終端或者平板電腦，則用戶的操作指令具體還可以為觸控點(diǎn)擊，長(zhǎng)按等操作。服務(wù)器通過(guò)讀取用戶的操作指令并進(jìn)行識(shí)別，以根據(jù)用戶的操作指令對(duì)程序代碼中的關(guān)于窗口內(nèi)容、浮動(dòng)欄和導(dǎo)航塊的代碼中的數(shù)據(jù)進(jìn)行更改，但不更改源代碼。
[0014]S103:根據(jù)該輸入的操作指令，更改該第一屬性數(shù)據(jù)以使該浮動(dòng)欄處于顯示狀態(tài)，并設(shè)置transit1n屬性數(shù)據(jù)以使該浮動(dòng)欄產(chǎn)生一預(yù)設(shè)方向的滑動(dòng)效果，更改該窗口內(nèi)容的第二屬性數(shù)據(jù)，以使該窗口內(nèi)容產(chǎn)生與該預(yù)設(shè)方向相反的滑動(dòng)。
[0015]具體的，當(dāng)用戶觸發(fā)相關(guān)的操作后，服務(wù)器后端利用javascript技術(shù)為窗口內(nèi)容div、本體導(dǎo)航塊div、浮動(dòng)欄div的代碼加上相應(yīng)的class類名，以此，服務(wù)器后端將浮動(dòng)欄的第一屬性數(shù)據(jù)中的right屬性的值更改為O，以使前端的浮動(dòng)欄從隱藏狀態(tài)更改為處于顯示狀態(tài)，并設(shè)置css3源代碼中的transit1n屬性數(shù)據(jù)，以使浮動(dòng)欄產(chǎn)生從一個(gè)預(yù)設(shè)方向滑出的動(dòng)畫(huà)效果，在本實(shí)施例中，優(yōu)選的為向右側(cè)滑出，窗口內(nèi)容的第二屬性數(shù)據(jù)中的I eft屬性的值更改為-450px，并設(shè)置transit1n屬性，以使該窗口內(nèi)容向左滑動(dòng)與浮動(dòng)欄寬度一致的距離，在本實(shí)施例中，該距離為-450px。
[0016]此外，在本實(shí)施例中，該方法還包括:配置導(dǎo)航塊的第三屬性數(shù)據(jù)，以使該導(dǎo)航塊處于隱藏狀態(tài)并固定定位;在更改該窗口內(nèi)容的第二屬性數(shù)據(jù)，以使該窗口內(nèi)容產(chǎn)生與該預(yù)設(shè)方向相反的滑動(dòng)的同時(shí)，更改該第三屬性數(shù)據(jù)，以使該導(dǎo)航塊處于顯示狀態(tài)，并設(shè)置transit1n屬性數(shù)據(jù)以使該導(dǎo)航塊為漸進(jìn)顯示的效果。
[0017]需要說(shuō)明的是，導(dǎo)航塊(id=〃op-mask 〃的div)設(shè)置為固定定位，寬度和高度都用CSS設(shè)置為100%，層級(jí)設(shè)置為-1，透明度為0，使得初始位于主體內(nèi)容之下。
[0018]在窗口內(nèi)容產(chǎn)生向左方向滑動(dòng)的同時(shí)，服務(wù)器后端將導(dǎo)航塊的opacity屬性的值更改為I，該導(dǎo)航塊從隱藏狀態(tài)變?yōu)轱@示狀態(tài)，并且z-1ndex屬性的值更改為1000，使導(dǎo)航塊覆蓋窗口內(nèi)容，且不覆蓋浮動(dòng)欄，同時(shí)設(shè)置css3的transit1n特效使得導(dǎo)航塊的出現(xiàn)是一個(gè)漸現(xiàn)的過(guò)程。
[0019]在本實(shí)施例中，該方法還包括:接收用戶點(diǎn)擊該導(dǎo)航塊這一操作指令;更改該第一屬性數(shù)據(jù)、第二屬性數(shù)據(jù)以及第三屬性數(shù)據(jù)為初始值，以隱藏該浮動(dòng)欄和導(dǎo)航塊，該窗口內(nèi)容向右滑動(dòng)與該浮動(dòng)欄寬度值一致的距離。
[0020]需要說(shuō)明的是，當(dāng)用戶點(diǎn)擊導(dǎo)航塊后，服務(wù)器后端接收操作指令，并將相應(yīng)的主體div、導(dǎo)航塊div、浮動(dòng)欄div中的代碼去除相應(yīng)的class類名，以將源代碼中關(guān)于窗口內(nèi)容、導(dǎo)航塊、浮動(dòng)欄的屬性數(shù)據(jù)的值恢復(fù)為初始值，浮動(dòng)欄重新回到隱藏狀態(tài)，窗口內(nèi)容滑動(dòng)回原位，導(dǎo)航塊回到隱藏狀態(tài)。
[0021]在本實(shí)施例中，本發(fā)明的html文件實(shí)現(xiàn)顯示瀏覽器窗口內(nèi)容的方法包括配置浮動(dòng)欄的第一屬性數(shù)據(jù)和窗口內(nèi)容的第二屬性數(shù)據(jù)，以使所述浮動(dòng)欄處于隱藏狀態(tài)，所述窗口內(nèi)容處于可運(yùn)動(dòng)狀態(tài);讀取輸入的操作指令;根據(jù)所述輸入的操作指令，更改所述第一屬性數(shù)據(jù)以使所述浮動(dòng)欄處于顯示狀態(tài)，并設(shè)置transit1n屬性數(shù)據(jù)以使所述浮動(dòng)欄產(chǎn)生一預(yù)設(shè)方向的滑動(dòng)效果，更改所述窗口內(nèi)容的第二屬性數(shù)據(jù)，以使所述窗口內(nèi)容產(chǎn)生與所述預(yù)設(shè)方向相反的滑動(dòng)。通過(guò)服務(wù)器接收操作指令后更改代碼中相應(yīng)的數(shù)據(jù)，以實(shí)現(xiàn)將隱藏的浮動(dòng)欄變?yōu)轱@示，并使窗口內(nèi)容和浮動(dòng)