以HTML實現訊息捲動

1.1 版本

1.2 預期效果

在一些大型的展示屏上，目前靜態的圖文展示已滿足不了市場需求，有時候可能需要實現一些動態圖文展示效果，例如跑馬燈滾屏效果，那麼要如何透過帆軟報表來實現呢？預期效果如下：

1）豎屏捲動：

2）橫屏捲動：

3）不規則橫屏捲動：

注：在決策報表中，也可以直接使用官方提供的插件：捲動訊息元件

1.3 實現思路

可以透過儲存格的純 HTML 展示效果來實現。

若想實現首位相接的滾屏效果可參考：JS實現首尾相接的跑馬燈

2.1 準備資料

建立普通報表，建立一個內建資料集 Embedded1，只新增一個欄位，自訂一些正文資料，如下圖所示：

2.2 設計報表

將資料集中的資訊欄位拖至 D4 儲存格，並設定擴展方向為不擴展。設計表格樣式如下圖所示：

右擊 D 列將其隱藏。

2.3 儲存格插入公式

2.3.1 從上往下，水平靠左捲動

選中 B4 儲存格，按滑鼠右鍵選擇「儲存格元素>插入公式」，公式如下：

"<marquee id='affiche' align='left' behavior='scroll' bgcolor='#ffffff' direction='up' height='250' 
width='400' hspace='0' vspace='2' loop='-1' scrollamount='10' scrolldelay='100' onMouseOut='this.start()' 
onMouseOver='this.stop()'>" + REPLACE(D4, ",", "<br /><br />") + "</marquee>"

注：公式是為了將 D4 儲存格的內容連結到 HTML 語句中。REPLACE(D4, ",", "<br/><br/>") 意思是將 D4 儲存格內容中的 "," 更換成"<br/><br/>"，<br /><br />在 HTML 中表示「換行」。

2.3.2 從下往上，水平置中捲動

只需要將上面的公式修改為：

"<marquee id='affiche' style='text-align:center;' behavior='scroll' behavior='scroll' bgcolor='#ffffff' 
direction='up' height='250' width='400' hspace='0' vspace='2' loop='-1' scrollamount='10' scrolldelay='100' 
onMouseOut='this.start()' onMouseOver='this.stop()'>" + REPLACE(D4, ",", "<br /><br />") + "</marquee>"

2.3.3 公式參數解譯

2.4 設定儲存格屬性

2.4.1 用 HTML 顯示儲存格內容

選中 B4 儲存格，將「儲存格屬性>其他」顯示內容設定為「用 HTML 顯示內容」，如下圖所示：

2.4.2 取消儲存格自動調整行高

選中 C4、D4 儲存格，右擊選擇其他，選擇「不自動調整」.

2.5 效果預覽

2.5.1 PC 端

儲存報表，點選「分頁預覽」，效果與 1.1 節豎屏捲動效果一致。

2.5.2 行動端

App 端和 HTML5 端均支援捲動效果，但不支援透過滑鼠行動使其暫停並繼續捲動的效果，如下圖所示：

3.1 準備資料

建立普通報表，建立一個內建資料集 Embedded1，只新增一個欄位，自訂一些正文資料，如下圖所示：

3.2 設計報表

將資料欄拖至 A1 儲存格，並設定擴展方向為「不擴展」，右擊 A 列將其隱藏，表格樣式如下圖所示：

3.3 儲存格插入公式

在 B2 儲存格插入公式：

"<marquee id='affiche' style='text-align:center;display:table-cell;vertical-align:middle;' behavior='scroll' 
bgcolor='#ffffff' direction='left' height='100%' width='500%' hspace='0' vspace='2' loop='-1' scrollamount='10'  
scrolldelay='100' onMouseOut='this.start()' onMouseOver='this.stop()'>" + REPLACE(A1, ",", " ") + "</marquee>"

注：公式參數解譯請參考 2.3.3 節。

3.4 設定儲存格屬性

選中 B2 儲存格，設定「儲存格屬性>其他」，選擇「基本」下「不自動調整」，顯示內容設定為「用 HTML 顯示內容」，如下圖所示：

3.5 效果預覽

3.5.1 PC 端

儲存報表，點選「分頁預覽」，可以看到正文從右往左，垂直置中捲動，效果與 1.1 節橫屏捲動效果一致。

3.5.2 行動端

App 端和 HTML5 端均支援捲動效果，但不支援透過滑鼠行動使其暫停並繼續捲動的效果，如下圖所示：

4.1 準備資料

建立普通報表，建立一個內建資料集 Embedded1，只新增一個欄位，自訂一些正文資料，如下圖所示：

4.2 設計報表

將資料欄拖入 A3 儲存格，並設定其擴展方向為「縱向擴展」，表格樣式如下圖所示：

最後將 A 列隱藏。

4.3 儲存格插入公式

在 B3 儲存格插入公式：

"<marquee id='affiche' align='left' behavior='scroll' bgcolor='#ffffff' direction='left' height='250' width='400' 
hspace='0' vspace='2' loop='-1' scrollamount='"+(rand()*(11-1)+1)+"' scrolldelay='100' onMouseOut='this.start()' 
onMouseOver='this.stop()'>" + REPLACE(A3, ",", "<br />") + "</marquee>"

注：公式參數解譯請參考 2.3.3 節。

其中scrollamount='"+(rand()*(11-1)+1)+"'  表示生成一個位於 11 和 1 之間的隨機數，作為運動速度的值。

4.4 設定儲存格屬性

選中 B3 儲存格，設定「儲存格屬性>其他」，選擇「基本」下「不自動調整」，顯示內容設定為「用 HTML 顯示內容」，如下圖所示：

4.5 效果預覽

4.5.1 PC 端

儲存報表，點選「分頁預覽」，效果與 1.1 節不規則橫屏捲動效果一致。

4.5.2 行動端

App 端和 HTML5 端均支援捲動效果，但不支援透過滑鼠行動使其暫停並繼續捲動的效果，如下圖所示：

已完成範本可參見：

%FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html實現縱向跑馬燈特效.cpt

%FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html實現橫向跑馬燈特效.cpt

%FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html實現不規則橫向跑馬燈特效.cpt

點選下載範本：

以html實作縱向跑馬燈特效.cpt

以html實作橫向跑馬燈特效.cpt

以html實現不規則橫向跑馬燈特效.cpt