在嵌入式瀏覽器中基于HTML的滾動(dòng)顯示效果實(shí)現(xiàn)方法研究

趙勇軍 符紅霞

收稿日期：2014－04－30

基金項(xiàng)目：阿壩師專校級(jí)規(guī)劃課題(ABS13-19)。

作者簡(jiǎn)介：趙勇軍(1978-),男,四川南充人,碩士,助理研究員,主要研究方向：計(jì)算機(jī)應(yīng)用技術(shù)、智能信息處理。

摘要：一種滾動(dòng)內(nèi)容顯示效果在嵌入式頁(yè)面中的應(yīng)用非常廣泛。實(shí)現(xiàn)滾動(dòng)顯示的效果有多種方式，其中MARQUEE 標(biāo)簽方式是使用最方便，頁(yè)面編碼最快捷的一種。當(dāng)然，頁(yè)面制作者的快捷來(lái)源于瀏覽器對(duì)該標(biāo)簽的全面支持,同時(shí)也是區(qū)分嵌入式瀏覽器功能是否完善的重要屬性之一。本文提供了一種如何在嵌入式瀏覽器中簡(jiǎn)單實(shí)現(xiàn)滾動(dòng)效果的方法。

關(guān)鍵詞：嵌入式瀏覽器； MARQUEE； 滾動(dòng)顯示

中圖分類號(hào)：TP308文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：2095-2163（2014）03-0100-03

Study on Implementation of Scrolling Display based on HTML in Embedded Browser

ZHAO Yongjun, FU Hongxia

(Network Management Center, Aba Teachers College, Wenchuan Sichuan623002, China)

Abstract：Scrolling display is extensively used in embedded page. There is a variety of ways to achieve scrolling display, where, MARQUEE tag is the most convenient and most efficient page-coding way. Obviously, this efficiency of page creators is from full support of browser to the tag, which is also one of the important properties to evaluate whether the functions of embedded browser are completed. This essay provides a simple way of how to achieve scrolling display in embedded browser.

Key words：Embedded Browser; MARQUEE; Scrolling Display

0引言

在程序編寫中，滾動(dòng)內(nèi)容顯示通常指用一個(gè)矩形區(qū)域顯示用戶特別關(guān)心的少量信息，這條信息串首尾相連，并且向一個(gè)方向循環(huán)滾動(dòng)。證券業(yè)中常用滾動(dòng)顯示來(lái)呈現(xiàn)不斷變化的股票行情，網(wǎng)頁(yè)中常用滾動(dòng)顯示提供瀏覽者一些重要信息等等。在滾動(dòng)顯示的多種實(shí)現(xiàn)方式中，HTML 語(yǔ)言的MARQUEE 標(biāo)簽以其編碼簡(jiǎn)單，使用方便和功能全面成為最受網(wǎng)頁(yè)制作者青睞的一種方式，因而也是目前倍受關(guān)注的研究課題。

MARQUEE 標(biāo)簽中，滾動(dòng)內(nèi)容并不只是局限于文本，圖片、表格，甚至一段HTML 代碼段都可以用來(lái)滾動(dòng)（瀏覽器會(huì)將其代碼段解析為用戶可以觀看的內(nèi)容）。而滾動(dòng)的速度、方向、循環(huán)方向、循環(huán)次數(shù)等等都可以自由設(shè)置［1］。在此，對(duì)其具體實(shí)現(xiàn)開(kāi)展分析研究。

1MARQUEE 標(biāo)簽的使用方法

1.1代碼示例

阿壩師范高等?？茖W(xué)校，以上代碼可實(shí)現(xiàn)“阿壩師范高等?？茖W(xué)校”幾個(gè)字在以紅色為背景色的560x30 范圍的矩形區(qū)域內(nèi)自右向左以8檔速度循環(huán)滾動(dòng)。

1.2標(biāo)簽的屬性

(1)滾動(dòng)方向(direction) ，包括left/right/up/down。缺省值為left，即自右向左滾動(dòng)。

(2)滾動(dòng)速度(scrollamount)，實(shí)際上是設(shè)定滾動(dòng)字幕滾動(dòng)一次的距離，其單位長(zhǎng)度由瀏覽器決定。缺省值為6。值越大，速度越快。

(3)滾動(dòng)方式(bihavior)，包括scroll/slide/alternate，分別表示反復(fù)地由一端滾動(dòng)至另一端；只滾動(dòng)一次，由一端滾動(dòng)至另一端；在兩端反復(fù)來(lái)回滾動(dòng)。缺省值為scroll。

(4)滾動(dòng)循環(huán)次數(shù)(loop)，包括infinite/num。infinite 或loop= -1，都表示無(wú)限次滾動(dòng)；num 等于幾，就表示循環(huán)幾次。缺省值為infinite。

(5)動(dòng)作延時(shí)(scrolldelay)，設(shè)定兩次滾動(dòng)之間的延遲時(shí)間。缺省值為0，表示每次滾動(dòng)結(jié)束后立即開(kāi)始下一次滾動(dòng)。

(6)滾動(dòng)區(qū)域背景色(bgcolor) ，設(shè)定滾動(dòng)區(qū)域的背景顏色。缺省值為透明；滾動(dòng)區(qū)域高度(height) 設(shè)定滾動(dòng)區(qū)域的高度；滾動(dòng)區(qū)域?qū)挾?width) 設(shè)定滾動(dòng)區(qū)域的寬度；空白( hspace/ vspace) 設(shè)定滾動(dòng)內(nèi)容左右邊框和上下邊框的寬度［2］。

2MARQUEE 標(biāo)簽的實(shí)現(xiàn)方法

2.1整體思路

在圖形引擎中將MARQUEE 處理為窗口控件，在瀏覽器中將其作為一個(gè)頁(yè)面元素參與排版。將待滾動(dòng)的內(nèi)容形成一個(gè)內(nèi)置子頁(yè)面，保存在本地，并呈現(xiàn)在該窗口控件中。同時(shí)注冊(cè)回調(diào)函數(shù)，并通過(guò)定時(shí)器，定時(shí)向該窗口控件發(fā)送滾動(dòng)消息，實(shí)現(xiàn)自動(dòng)滾屏［3］。而MARQUEE 的各種屬性，則通過(guò)窗口控件和內(nèi)置子頁(yè)面的渲染得到相應(yīng)的體現(xiàn)。

生成內(nèi)置子頁(yè)面的實(shí)現(xiàn)方式，使得滾動(dòng)內(nèi)容不再受到限制，既可以是文字、表格、圖片，也可以是任何一段HTML 代碼所呈現(xiàn)出來(lái)的效果。當(dāng)滾動(dòng)內(nèi)容是待解析的HTML代碼段時(shí)，代碼段可以和內(nèi)置子頁(yè)面一起送入瀏覽器解析流程完成解析［4］。

2.2內(nèi)置子頁(yè)面生成方式根據(jù)滾動(dòng)方向不同進(jìn)行設(shè)定

內(nèi)置子頁(yè)面的生成方式可分為兩類，首先將水平方向作為實(shí)例進(jìn)行設(shè)定：以MARQUEE窗口的高度為高度，以MARQUEE 窗口的寬度為寬度，形成左右兩個(gè)空白邊距區(qū)域，拼接在滾動(dòng)內(nèi)容左右。在窗口呈現(xiàn)的初始狀態(tài)，即為頁(yè)面左空白邊距。當(dāng)可視區(qū)域窗口收到消息開(kāi)始滾動(dòng)時(shí)，內(nèi)容從可視窗口右側(cè)進(jìn)入，向左滾動(dòng)，即形成預(yù)期的滾動(dòng)效果。當(dāng)滾動(dòng)到末尾的時(shí)候，呈現(xiàn)給用戶的依然是空白區(qū)域，此時(shí)滾動(dòng)結(jié)束，如果將內(nèi)置頁(yè)面重新定位到最初位置，重新開(kāi)始一輪滾動(dòng)，即獲得了循環(huán)滾動(dòng)的效果［5］。MARQUEE頁(yè)面如圖1所示。第3期趙勇軍，等：在嵌入式瀏覽器中基于HTML的滾動(dòng)顯示效果實(shí)現(xiàn)方法研究智能計(jì)算機(jī)與應(yīng)用第4卷

圖1MARQUEE頁(yè)面圖

Fig.1MARQUEE page figure

將待滾動(dòng)的內(nèi)容添加到內(nèi)置子頁(yè)面之后，該頁(yè)面將會(huì)送入瀏覽器的解析流程，并和其它從網(wǎng)絡(luò)上獲得的頁(yè)面文件一樣，經(jīng)過(guò)瀏覽器的后續(xù)排版、渲染等流程，最終顯示給用戶。

創(chuàng)建內(nèi)置子頁(yè)面的代碼示例如下：

int marquee_htm_new(char *textcolor,char *bgcolor, int type,int width, int height, char* file_name, char* marquee_str)

{ FILE* fp = fopen(file_name, "w+");

if( fp == NULL )

return -1;

if(type == 0)

{/*direction is up or down*/fprintf(fp, "＼n＼n

fprintf(fp, " bgcolor=＼"%s＼"", bgcolor); fprintf(fp, " text=＼"%s＼"", textcolor); fprintf(fp, " style=＼"font-size:%dpx＼">＼n", style->font->size); fprintf(fp, "