FVS跑馬燈特效

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

1.1 版本

1.2 應用場景

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

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

注：表格組件跑馬燈特效不支援行動端，富正文和標題組件跑馬燈特效支援行動端。

1.3 功能簡介

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

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

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

注：預覽時，滑鼠懸浮捲動內容，捲動停止；滑鼠移開，捲動繼續。

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