[發(fā)明專利]一種自適應(yīng)HTML滾屏展示實(shí)時(shí)信息的方法

有效

• 申請(qǐng)?zhí)枺?/td>: 201710021118.6
• 申請(qǐng)日: 2017-01-11
• 公開(kāi)（公告）號(hào): CN106874387B
• 公開(kāi)（公告）日: 2020-09-11
• 發(fā)明（設(shè)計(jì)）人: 何霜霜;牟榮增;王宏飛;張藝翔;汪洋
• 申請(qǐng)（專利權(quán)）人: 中科院微電子研究所昆山分所
• 主分類號(hào): G06F16/957
• 分類號(hào): G06F16/957
• 代理公司: 北京辰權(quán)知識(shí)產(chǎn)權(quán)代理有限公司 11619
• 代理人: 佟林松

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

技術(shù)領(lǐng)域

本發(fā)明涉及一種自適應(yīng)HTML滾屏展示實(shí)時(shí)信息的方法。屬于網(wǎng)頁(yè)設(shè)計(jì)技術(shù)領(lǐng)域。

背景技術(shù)

在展示性的網(wǎng)頁(yè)中，往往需要用到文字滾動(dòng)的方法來(lái)展示實(shí)時(shí)信息，也可以是移動(dòng)圖片、表格，甚至小視頻。簡(jiǎn)單的頁(yè)面自動(dòng)滾動(dòng)效果，可由JavaScript來(lái)實(shí)現(xiàn)，也可由html標(biāo)簽——marquee/marquee來(lái)實(shí)現(xiàn)，后者無(wú)需JavaScript控制。

marquee/marquee的屬性之一behavior可設(shè)置滾動(dòng)的方式，然而無(wú)論是scroll(由一端滾動(dòng)到另一端,會(huì)重復(fù),缺陷是不能無(wú)縫滾動(dòng))還是slide(由一端滾動(dòng)到另一端,不會(huì)重復(fù))都無(wú)法實(shí)現(xiàn)無(wú)縫滾動(dòng)的功能。

簡(jiǎn)單的JavaScript控制，也無(wú)法找到在網(wǎng)頁(yè)寬度自適應(yīng)條件下仍保持無(wú)縫滾動(dòng)的現(xiàn)有技術(shù)解決方案。

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

本發(fā)明為了克服上述現(xiàn)有技術(shù)中存在的技術(shù)缺陷，本發(fā)明基于bootstrap框架下的頁(yè)面實(shí)時(shí)滾動(dòng)最新消息(可能是文字，圖片等，以下稱為對(duì)象)的需求，包括對(duì)象的出現(xiàn)方式、滾動(dòng)方式、停留方式、消失方式等設(shè)計(jì)了一套完整的流程，提出一種自適應(yīng)HTML滾屏展示實(shí)時(shí)信息的方法，本發(fā)明的目的是通過(guò)以下技術(shù)方案實(shí)現(xiàn)的。

一種自適應(yīng)HTML滾屏展示實(shí)時(shí)信息的方法，包括:在自定義的周期內(nèi)，采用瀏覽器AJAX發(fā)起獲取最新數(shù)據(jù)的請(qǐng)求；將返回的結(jié)果按要求拼接成要展示的形式，作為最新對(duì)象，當(dāng)前正在展示的對(duì)象作為當(dāng)前對(duì)象,將最新對(duì)象和當(dāng)前對(duì)象做對(duì)比；若判斷當(dāng)前對(duì)象即為最新對(duì)象，不做任何操作，否則，當(dāng)前對(duì)象停止?jié)L屏自動(dòng)消失，最新對(duì)象出現(xiàn)，然后最新對(duì)象滾動(dòng)顯示。

優(yōu)選地，在采用瀏覽器AJAX發(fā)起獲取最新數(shù)據(jù)的請(qǐng)求之前，還包括如下步驟：

S1：創(chuàng)建一個(gè)父容器的div，所述父容器的樣式設(shè)置為相對(duì)定位，其中，高度固定，寬度根據(jù)當(dāng)前瀏覽器頁(yè)面的寬度變化，若需要顯示的內(nèi)容超出父容器所能承載的空間，則不顯示超出部分；

S2：創(chuàng)建父容器的兩個(gè)塊級(jí)子元素A和B，子元素A顯示，其承載要滾動(dòng)的對(duì)象，隨著滾動(dòng)不斷改變位置；子元素B隱藏，其用于存儲(chǔ)當(dāng)前對(duì)象的初始文本以及測(cè)量文本的寬度。

優(yōu)選地，對(duì)于所述子元素A和所述子元素B的子元素樣式，除了子元素A是顯示、子元素B是隱藏，此外所述子元素A和所述子元素B的其他樣式完全相同。

優(yōu)選地，所述其他樣式包括絕對(duì)定位，其中，段落中的文本不進(jìn)行換行。

優(yōu)選地，所述方法進(jìn)一步包括：

S11:采用AJAX異步請(qǐng)求得到最新數(shù)據(jù)，將返回的結(jié)果按照固定格式拼接成要展示的形式，作為最新對(duì)象；

S12:當(dāng)前展示的對(duì)象作為當(dāng)前對(duì)象存儲(chǔ)在元素B中，將所述最新對(duì)象和所述當(dāng)前對(duì)象作比較，若內(nèi)容相同，則表示當(dāng)前對(duì)象即為最新對(duì)象，返回S11，讓當(dāng)前對(duì)象繼續(xù)按照原有形式展示,若不同則執(zhí)行S13；

S13:結(jié)束當(dāng)前對(duì)象的展示，將最新對(duì)象賦值給元素A、元素B，獲取此時(shí)瀏覽器寬度下的父容器的寬度和元素B的新寬度，此時(shí)元素A和元素B的寬度相同；