JS實現普通報表中自動滾屏/跑馬燈效果

1.1 版本

1.2 預期效果

報表瀏覽頁面上放置很多圖表時，由於內容過多，超出了瀏覽器視窗的大小導致內容展示不全，這時可以使用滾屏或跑馬燈來實現內容全部展示，如下圖所示：

1.3 實現思路

給報表新增「載入結束」JS 事件實現滾屏和跑馬燈的效果。

跑馬燈的詳細API介紹可參見：跑馬燈API

決策報表實現跑馬燈效果請參考：JS實現決策報表中滾屏/跑馬燈效果

2.1 準備範本

1）建立普通報表，建立資料集ds1，SQL 語句為 SELECT * FROM 銷量 

2）設計報表樣式，如下圖所示：

2.2 凍結標題行

點選「範本>重複與凍結設定」，設定重複和凍結標題行，如下圖所示：

2.3 新增 JS 事件

點選「範本>範本 Web 屬性>分頁預覽設定」，選擇「為該範本單獨設定」，新增一個「載入結束」事件，如下圖所示：

JavaScript 程式碼如下：

_g().startMarquee();

2.4 效果預覽

2.4.1 PC 端

儲存範本，點選「分頁預覽」，此時跑馬燈效果為：間隔時長預設為 0.1 s，每次捲動的距離為 5 px，滑鼠懸停時暫停。效果如 1.1 節所示。

2.4.2 行動端

不支援行動端。

不同的應用場景，需要不同的捲動效果，只需要在「載入結束」事件中修改相應的 JS 程式碼即可。

注：JS 程式碼非固定，可根據使用場景選擇和修改程式碼。

3.1 無標題行捲動

報表不設定標題行凍結，直接滾屏顯示，效果如下圖所示：

JavaScript 程式碼如下：

_g().startMarquee();

3.2 無標題行滑鼠懸停不停止捲動

報表捲動時，滑鼠點選，可以停止捲動，效果如下圖所示：

JavaScript 程式碼如下：

_g().startMarquee({                
stopOnHover:false    
});

3.3 無標題行每 0.3s 捲動 2 px，滑鼠懸停暫停

報表捲動時，滑鼠懸浮報表，捲動會停止；滑鼠移開，再次捲動。效果如下圖所示：

JavaScript 程式碼如下：

_g().startMarquee({        
	offset: 2,        
	interval: 0.3,        
	stopOnHover:true    
});

已完成範本可參考：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分頁預覽JS實體\JS實現滾屏或跑馬燈.cpt

點選下載範本：JS实现滚屏或跑马灯.cpt