Dashboard以豐富的動態、可交互的可視化界面為用戶提供了更好的數據使用體驗，讓決策者能夠更高效的了解企業的重要信息和細節層次。在DBD的各種動態效果中，滾屏是較為常見的一種，例如下圖中的數據列表因為布局是固定的，因此就需要滾動顯示數據。?

?

通常報表中見到的滾屏是因為“頁面大、窗口小”，也就是打開的窗口區域容納不了整個頁面的內容，需要靠鍵盤的方向鍵或鼠標滾輪來移動查看。而在DBD中，為了更好的交互效果，需要滾動自動持續進行，只有當鼠標移到該區域時才暫停。這種方式雖說已經比較常見了，但一般來說報表廠商卻并沒有直接提供，而是需要通過jquery,JS來實現。現在我就給大家介紹一下如何實現這種文字滾屏效果。

我們將在潤乾報表設計器自帶的“設備故障分析.rpx”基礎上實現文字滾屏實例。

數據集整理

對于從數據庫讀取的數據，可以通過集算器，將數據整理成下面截圖中的效果。為了方便做效果，這里我直接將ds2這個內建數據中的所有字段的值整理到“設備”這個字段中，并且在里面加上了些空格，以便頁面上縮進的效果好看些。

?

合并單元格

將G15列刪除，B15—F15選中，合并。

單元格數據類型設置為html

?

?

4.?設置單元格表達式，如上圖所示。下面是具體的表達式。

="<marquee direction='up' scrollamount='6' οnmοuseοver='this.stop()' οnmοuseοut='this.start()'>"+replace(string@q(ds2.select(設備)),",","<br>")+"</marquee>"

其中：

οnmοuseοver=this.stop()表示當鼠標以上區域的時候滾動停止；

οnmοuseοut=this.start()表示當鼠標移開的時候繼續滾動。?

調整樣式

原B15-F15設置了各行異色，因為我們的文字滾動項作為統一的一串內容，所以按照以上設置，效果感覺會有些突兀，如下圖所示。

?

去掉B15-F15背景色的設置，這樣滾動區域就整體渾然一體。

?

經過以上步驟我們的數據列表就在DBD面板中滾動起來了，并且當鼠標指向數據的時候就會停止滾動，鼠標移開的時候就繼續滾動了，這樣的交互效果無疑會為你的大屏展現錦上添花。

上面這個小例子簡單實現了文字滾動顯示的效果。下面我具體講解下看似神奇的<marquee>標簽的各個屬性值，相信看過后一定會幫助您實現更好的文字滾動效果：

<marquee>是成對出現的標簽，首標簽<marquee>和尾標簽</marquee>之間的內容就是滾動內容。<marquee>標簽的屬性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它們都是可選的。?

?

?

屬性值	功能簡述	屬性值	示例
behavior	滾動的方式	alternate、scroll、slide，分別表示文字來回滾動、單方向循環滾動、只滾動一次，scroll和slide的滾動方向將依照direction屬性中參數	?<marquee?behavior="alternate">我來回滾動</marquee>? ????<marquee?behavior="scroll">我單方向循環滾動</marquee> ????<marquee?behavior="scroll" direction="up" height="30">我向上循環滾動</marquee>? ????<marquee?behavior="slide">我只滾動一次</marquee>? ????<marquee?behavior="slide" direction="up">我改向上只滾動一次了</marquee>
bgcolor	文字滾動范圍的背景顏色	參數值是16進制(形式:#AABBCC或#AA5566等)或預定義的顏色名字(如red、yellow、blue等)	<marquee?behavior=="slide" direction="left" bgcolor="red">我的背景色是紅色的</marquee>?
direction	文字滾動的方向	屬性的參數值有down、left、right、up共四個單一可選值，	<marquee direction="right">我向右滾動</marquee>
width、height	決定滾動文字在頁面中的矩形范圍大小。	正數	?<marquee?width="300" height="30" bgcolor="red">我寬300像素，高30像素。</marquee>
hspace，vspace	滾動矩形區域距周圍的空白區域	正數	????<marquee?width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形邊緣水平和垂直距周圍各10像素。</marquee>? ????<marquee?width="300" height="30" vspace="50" hspace="50" bgcolor="red">我矩形邊緣水平和垂直距周圍各50像素。</marquee>?
loop	滾動文字的滾動次數	正整數	<marquee?loop="2">我滾動2次。</marquee>? <marquee?loop="infinite">我無限循環滾動。</marquee>? ?<marquee?loop="-1">我無限循環滾動。</marquee>
scrollamount	文字滾動的速度(scrollamount)	正整數	?<marquee?scrollamount="100">我速度很快.</marquee>? ?<marquee?scrollamount="50">我慢了些。</marquee>? ?
scrolldelay	延時	正整數	???<marquee?scrolldelay="30">我小步前進。</marquee>?

另外，您也可以將<marquee>和</marquee>之間的內容替換成圖像或其它對象。

怎么樣，是不是您已經在摩拳擦掌躍躍欲試了？別猶豫，讓我們一起來豐富Dashboard效果，讓頁面效果動起來吧！

轉載于:https://www.cnblogs.com/shiGuangShiYi/p/9815147.html

總結

以上是生活随笔為你收集整理的报表怎样实现滚动的公告效果？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。