一種自適應(yīng)HTML滾屏展示實(shí)時信息的方法技術(shù)

本發(fā)明專利技術(shù)提供一種自適應(yīng)HTML滾屏展示實(shí)時信息的方法，其采用瀏覽器AJAX發(fā)起獲取最新數(shù)據(jù)的請求，請求周期自定義，將返回的結(jié)果按要求拼接成要展示的形式，即為最新對象，并與當(dāng)前正在展示的對象，即為當(dāng)前對象，作對比，若判斷當(dāng)前對象即為最新對象，不做任何操作，否則，當(dāng)前對象停止?jié)L屏自動消失，最新對象出現(xiàn)，然后滾動。所述方法采用最基本的JavaScript腳本控制元素內(nèi)容的移動位置，無需引入其他插件，實(shí)現(xiàn)了對象的無縫滾動，直接通過瀏覽器就可實(shí)現(xiàn)。在周期相對較短時，在縮放瀏覽器頁面的同時仍能很好地實(shí)時調(diào)整對象的展現(xiàn)方式，在各種移動設(shè)備如手機(jī)、平板上也適用。

Method for displaying real time information by self-adapting HTML rolling screen

The present invention provides a method of adaptive HTML scrolling display of real-time information, the browser AJAX initiated to obtain the latest data request, request cycle custom, results will be returned to display the form according to the requirements of stitching, is the new object, and the object is currently displayed, which is the current object, as if the comparison, determine the current object is the object, do not do any operation, otherwise, the current object stop scrolling disappears and the new object, then rolling. The method uses the basic JavaScript script to control the moving position of the elements, and without the introduction of other plug-ins, the seamless scrolling of the object can be realized directly through the browser. When the cycle is relatively short, while zooming the browser page, the display mode of the object can be adjusted very well in real time, and is applicable to a variety of mobile devices, such as mobile phones and tablets.

【技術(shù)實(shí)現(xiàn)步驟摘要】
一種自適應(yīng)HTML滾屏展示實(shí)時信息的方法
本專利技術(shù)涉及一種自適應(yīng)HTML滾屏展示實(shí)時信息的方法。屬于網(wǎng)頁設(shè)計

技術(shù)介紹
在展示性的網(wǎng)頁中，往往需要用到文字滾動的方法來展示實(shí)時信息，也可以是移動圖片、表格，甚至小視頻。簡單的頁面自動滾動效果，可由JavaScript來實(shí)現(xiàn)，也可由html標(biāo)簽——<marquee></marquee>來實(shí)現(xiàn)，后者無需JavaScript控制。<marquee></marquee>的屬性之一behavior可設(shè)置滾動的方式，然而無論是scroll(由一端滾動到另一端,會重復(fù),缺陷是不能無縫滾動)還是slide(由一端滾動到另一端,不會重復(fù))都無法實(shí)現(xiàn)無縫滾動的功能。簡單的JavaScript控制，也無法找到在網(wǎng)頁寬度自適應(yīng)條件下仍保持無縫滾動的現(xiàn)有技術(shù)解決方案。
技術(shù)實(shí)現(xiàn)思路
本專利技術(shù)為了克服上述現(xiàn)有技術(shù)中存在的技術(shù)缺陷，本專利技術(shù)基于bootstrap框架下的頁面實(shí)時滾動最新消息(可能是文字，圖片等，以下稱為對象)的需求，包括對象的出現(xiàn)方式、滾動方式、停留方式、消失方式等設(shè)計了一套完整的流程，提出一種自適應(yīng)HTML滾屏展示實(shí)時信息的方法，本專利技術(shù)的目的是通過以下技術(shù)方案實(shí)現(xiàn)的。一種自適應(yīng)HTML滾屏展示實(shí)時信息的方法，包括:在自定義的周期內(nèi)，采用瀏覽器AJAX發(fā)起獲取最新數(shù)據(jù)的請求；將返回的結(jié)果按要求拼接成要展示的形式，作為最新對象，當(dāng)前正在展示的對象作為當(dāng)前對象,將最新對象和當(dāng)前對象做對比；若判斷當(dāng)前對象即為最新對象，不做任何操作，否則，當(dāng)前對象停止?jié)L屏自動消失，最新對象出現(xiàn)，然后最新對象滾動顯示。優(yōu)選地，在采用瀏覽器AJAX發(fā)起獲取最新數(shù)據(jù)的請求之前，還包括如下步驟：S1：創(chuàng)建一個父容器的div，所述父容器的樣式設(shè)置為相對定位，其中，高度固定，寬度根據(jù)當(dāng)前瀏覽器頁面的寬度變化，若需要顯示的內(nèi)容超出父容器所能承載的空間，則不顯示超出部分；S2：創(chuàng)建父容器的兩個塊級子元素A和B，子元素A顯示，其承載要滾動的對象，隨著滾動不斷改變位置；子元素B隱藏，其用于存儲當(dāng)前對象的初始文本以及測量文本的寬度。優(yōu)選地，對于所述子元素A和所述子元素B的子元素樣式，除了子元素A是顯示、子元素B是隱藏，此外所述子元素A和所述子元素B的其他樣式完全相同。優(yōu)選地，所述其他樣式包括絕對定位，其中，段落中的文本不進(jìn)行換行。優(yōu)選地，所述方法進(jìn)一步包括：S11:采用AJAX異步請求得到最新數(shù)據(jù)，將返回的結(jié)果按照固定格式拼接成要展示的形式，作為最新對象；S12:當(dāng)前展示的對象作為當(dāng)前對象存儲在元素B中，將所述最新對象和所述當(dāng)前對象作比較，若內(nèi)容相同，則表示當(dāng)前對象即為最新對象，返回S11，讓當(dāng)前對象繼續(xù)按照原有形式展示,若不同則執(zhí)行S13；S13:結(jié)束當(dāng)前對象的展示，將最新對象賦值給元素A、元素B，獲取此時瀏覽器寬度下的父容器的寬度和元素B的新寬度，此時元素A和元素B的寬度相同；S14：比較父容器寬度和元素B的寬度,若元素B寬度小于等于父容器寬度，執(zhí)行S15,若元素B寬度大于父容器寬度，執(zhí)行S16；S15:將元素A以由下至上的動畫方式出現(xiàn)，結(jié)束動畫后，元素A以左右居中的方式靜止在父容器的中間部位；S16：最新對象以居右的由下至上的動畫方式出現(xiàn)，結(jié)束動畫后元素A開始以水平從右向左的方式移動，當(dāng)元素A的最后一個字出現(xiàn)后，此時若沒有可更新的最新對象或者不到一個周期的時長，在元素A末尾加上元素B中的內(nèi)容，繼續(xù)向左移動，當(dāng)元素A再次滾動完后，繼續(xù)在末尾加上元素B中的內(nèi)容，如此反復(fù)；S17：一個周期結(jié)束后，執(zhí)行S11，其中周期自定義。本專利技術(shù)的自適應(yīng)寬度下滾屏展示實(shí)時消息的方法，采用最基本的JavaScript腳本控制元素內(nèi)容的移動位置，無需引入其他插件，實(shí)現(xiàn)了對象的無縫滾動，直接通過瀏覽器就可實(shí)現(xiàn)。在周期相對較短時，在縮放瀏覽器頁面的同時仍能很好地實(shí)時調(diào)整對象的展現(xiàn)方式，在各種移動設(shè)備如手機(jī)、平板上也適用。附圖說明通過閱讀下文優(yōu)選實(shí)施方式的詳細(xì)描述，各種其他的優(yōu)點(diǎn)和益處對于本領(lǐng)域普通技術(shù)人員將變得清楚明了。附圖僅用于示出優(yōu)選實(shí)施方式的目的，而并不認(rèn)為是對本專利技術(shù)的限制。而且在整個附圖中，用相同的參考符號表示相同的部件。在附圖中：圖1是按照本專利技術(shù)實(shí)施方式的HTML文檔的DOM結(jié)構(gòu)的實(shí)現(xiàn)流程圖。圖2是按照本專利技術(shù)實(shí)施方式的JavaScript腳本的工作流程圖。具體實(shí)施方式下面將參照附圖更詳細(xì)地描述本公開的示例性實(shí)施方式。雖然附圖中顯示了本公開的示例性實(shí)施方式，然而應(yīng)當(dāng)理解，可以以各種形式實(shí)現(xiàn)本公開而不應(yīng)被這里闡述的實(shí)施方式所限制。相反，提供這些實(shí)施方式是為了能夠更透徹地理解本公開，并且能夠?qū)⒈竟_的范圍完整的傳達(dá)給本領(lǐng)域的技術(shù)人員。一種自適應(yīng)寬度下HTML滾屏展示實(shí)時消息的方法，采用最基本的JavaScript腳本控制元素內(nèi)容的移動位置，無需引入其他插件，實(shí)現(xiàn)了對象的無縫滾動，直接通過瀏覽器就可實(shí)現(xiàn)。在周期相對較短時，在縮放瀏覽器頁面的同時仍能很好地實(shí)時調(diào)整對象的展現(xiàn)方式，在各種移動設(shè)備如手機(jī)，平板上也適用。該方法采用瀏覽器AJAX發(fā)起獲取最新數(shù)據(jù)的請求，請求周期自定義，將返回的結(jié)果按要求拼接成要展示的形式(以文本為例，以下稱為最新對象)，并與當(dāng)前正在展示的對象(當(dāng)前對象)做對比，若判斷當(dāng)前對象即為最新對象，不做任何操作，否則，當(dāng)前對象停止?jié)L屏自動消失，最新對象出現(xiàn)，然后滾動。具體地，按照圖1所示，HTML文檔的DOM結(jié)構(gòu)的實(shí)現(xiàn)過程如下：S1：創(chuàng)建一個父容器的div，該父容器的樣式設(shè)置為相對定位，高度固定，寬度則是根據(jù)當(dāng)前瀏覽器頁面的寬度變化，若其中的內(nèi)容超出父容器所能承載的空間，則不顯示超出部分。S2：創(chuàng)建父容器的兩個塊級子元素(例如<p></p>元素)，子元素A承載要滾動的對象，會隨著滾動不斷改變位置；子元素B隱藏，用來存儲當(dāng)前對象的初始文本以及測量文本的寬度。除了顯示/隱藏的樣式不同，A和B的其他樣式完全相同，包括絕對定位，且需規(guī)定段落中的文本不進(jìn)行換行(white-space:nowrap)，否則對象寬度無法準(zhǔn)確獲得。按照圖2所示，其中，JavaScript腳本的工作流程如下：S11:采用ajax異步請求得到最新數(shù)據(jù)，將返回的結(jié)果按照固定格式拼接成要展示的形式(最新對象)。S12:最新對象與當(dāng)前展示對象(存儲在元素B中)作比較，若內(nèi)容相同，則表示當(dāng)前對象即為最新消息，不做任何操作，讓當(dāng)前對象繼續(xù)按照原有形式展示。S13:若S12中的比較結(jié)果為不同，則表示有需要更新的最新消息，立即結(jié)束當(dāng)前對象的展示。將最新對象賦值給元素A、元素B，獲取此時瀏覽器寬度下的父容器的寬度和元素B的新寬度，此時元素A和元素B的寬度相同。S14：比較父容器寬度和元素B的寬度。S15:若S14中元素B寬度小于等于父容器寬度，表示最新對象完全可以被父容器所承載，不需要通過以滾動的形式來展現(xiàn)全部內(nèi)容。所以元素A以由下至上的動畫方式出現(xiàn)，動畫使用CSS3的animation,結(jié)束動畫后元素A以左右居中的方式靜止在父容器的中間部位。S16：若S14中元素B寬度大于父容器寬度，則表示最新對象無法在父容器中展示全貌。首先最新對象以居右的由下至上的動畫方式出現(xiàn)，結(jié)束動畫后元素A開始本文檔來自技高網(wǎng)...

【技術(shù)保護(hù)點(diǎn)】
一種自適應(yīng)HTML滾屏展示實(shí)時信息的方法，包括:在自定義的周期內(nèi)，采用瀏覽器AJAX發(fā)起獲取最新數(shù)據(jù)的請求；將返回的最新數(shù)據(jù)進(jìn)行預(yù)處理，作為最新對象，當(dāng)前正在展示的對象作為當(dāng)前對象,將最新對象和當(dāng)前對象做對比；若判斷當(dāng)前對象即為最新對象，不做任何操作，否則，當(dāng)前對象停止?jié)L屏并自動消失，最新對象出現(xiàn)，其后最新對象滾動顯示。

【技術(shù)特征摘要】
1.一種自適應(yīng)HTML滾屏展示實(shí)時信息的方法，包括:在自定義的周期內(nèi)，采用瀏覽器AJAX發(fā)起獲取最新數(shù)據(jù)的請求；將返回的最新數(shù)據(jù)進(jìn)行預(yù)處理，作為最新對象，當(dāng)前正在展示的對象作為當(dāng)前對象,將最新對象和當(dāng)前對象做對比；若判斷當(dāng)前對象即為最新對象，不做任何操作，否則，當(dāng)前對象停止?jié)L屏并自動消失，最新對象出現(xiàn)，其后最新對象滾動顯示。2.根據(jù)權(quán)利要求1所述的方法，其特征在于：在采用瀏覽器AJAX發(fā)起獲取最新數(shù)據(jù)的請求之前，還包括如下步驟：S1：創(chuàng)建一個父容器的div，所述父容器的樣式設(shè)置為相對定位，其中，高度固定，寬度根據(jù)當(dāng)前瀏覽器頁面的寬度變化，若需要顯示的內(nèi)容超出父容器所能承載的空間，則不顯示超出部分；S2：創(chuàng)建父容器的兩個塊級子元素A和B，子元素A顯示，其承載要滾動的對象，隨著滾動不斷改變位置；子元素B隱藏，其用于存儲當(dāng)前對象的初始文本以及測量文本的寬度。3.根據(jù)權(quán)利要求2所述的方法，其特征在于：對于所述子元素A和所述子元素B的子元素樣式，除了子元素A是顯示、子元素B是隱藏，此外所述子元素A和所述子元素B的其他樣式完全相同。4.根據(jù)權(quán)利要求3所述的方法，其特征在于：所述其他樣式包括絕對定位，其中，段落中的文本不進(jìn)行換行。5.根據(jù)權(quán)利要...

【專利技術(shù)屬性】
技術(shù)研發(fā)人員：何霜霜，牟榮增，王宏飛，張藝翔，汪洋，
申請(專利權(quán))人：中科院微電子研究所昆山分所，
類型：發(fā)明
國別省市：江蘇,32