FVS跑馬燈特效

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FineVis 的相關功能。

1.1 版本

1.2 應用場景

V1.14.0 版本之前，僅支援使用 JS 實現表格跑馬燈特效，但設定方法繁瑣，學習理解成本較高，實現效果較為侷限。

因此 FVS 將跑馬燈特效做成了功能配置項，且除 表格組件 外，還支援 富正文組件 和 標題組件 ，更加便捷易用。

注：支援行動端。

1.3 功能簡介

在對應組件右側配置面板「內容」Tab 下，勾選「開啟跑馬燈特效」後，顯示跑馬燈各配置項。

支援捲動內容、捲動方式、捲動方向、捲動速度和捲動間隔五項設定。如下圖所示：

注：富正文和標題組件無「捲動內容」和「捲動方式」設定項，按照預設邏輯捲動。

跑馬燈效果在預覽時，預設滑鼠懸浮組件，捲動暫停；滑鼠移出組件，捲動繼續 。

注：FVS V3.0.0 及以上版本，新增組件懸停的控制API，可實現懸停效果的開啟或關閉。詳情請參見：JS控制滑鼠懸停效果的開啟與關閉 。

2.1 捲動內容

1）富正文/標題組件無該配置項，預設按照組件全部內容捲動。

2）表格組件支援設定表格內容選擇「逐條」或「整屏」捲動，預設為逐條捲動

逐條：表格內容按照每列/欄的距離捲動，即使有合併儲存格或分組顯示的列欄，依然按照原始列/欄距離捲動，凍結的列/欄不包括在內。

整屏：表格內容按照當前首屏展示內容的距離進行捲動，凍結的列/欄不包括在內。

逐條	整屏

2.2 捲動方式

1）富正文/標題組件無該配置項，預設按照組件全部內容的尾部從一側捲動結束後，頭部從另一側進入繼續捲動。

2）表格組件支援選擇捲動方式為「首尾相接」或「從頭開始」，預設為首尾相接。

首尾相接：表格捲動到結尾列後，自動連結着表格首列，繼續捲動。

從頭開始：表格捲動到結尾列後，跳轉到首列，重新捲動。

首尾相接	從頭開始

2.3 捲動方向

捲動方向包括：向上、向下、向左、向右。

1）表格組件：預設向上。橫向擴展表格可使用向左或向右捲動。

2）富正文/標題組件：預設向左。

以標題組件向左和向上捲動為例，效果如下圖所示：

2.4 捲動速度

捲動速度預設值均為 50px/s，表示捲動完 50px 距離需要 1s ，支援修改。

以 30px/s 和 150px/s 為例，對比效果如下：

30px/s	150px/s

2.5 捲動間隔

捲動間隔表示每次捲動完成後停留的時間（與上一次捲動的位置重疊視為捲動完成），若間隔為 0 ，則持續捲動不停留。

1）表格組件：逐條捲動預設為 0.1s，整屏捲動預設為 1s，支援修改。

2）富正文/標題組件：預設為 1s，支援修改。

表格組件捲動間隔為 1s 和 0s 為例，對比效果如下：

1s	0s

標題組件以捲動間隔為 1s 和 0s 為例，對比效果如下：

1s	0s

點選下載範本：FVS跑馬燈特效.fvs