报表怎样实现滚动的公告效果？
Dashboard以豐富的動態(tài)、可交互的可視化界面為用戶提供了更好的數(shù)據(jù)使用體驗(yàn)，讓決策者能夠更高效的了解企業(yè)的重要信息和細(xì)節(jié)層次。在DBD的各種動態(tài)效果中，滾屏是較為常見的一種，例如下圖中的數(shù)據(jù)列表因?yàn)椴季质枪潭ǖ?#xff0c;因此就需要滾動顯示數(shù)據(jù)。?
?
通常報(bào)表中見到的滾屏是因?yàn)?/span>“頁面大、窗口小”，也就是打開的窗口區(qū)域容納不了整個(gè)頁面的內(nèi)容，需要靠鍵盤的方向鍵或鼠標(biāo)滾輪來移動查看。而在DBD中，為了更好的交互效果，需要滾動自動持續(xù)進(jìn)行，只有當(dāng)鼠標(biāo)移到該區(qū)域時(shí)才暫停。這種方式雖說已經(jīng)比較常見了，但一般來說報(bào)表廠商卻并沒有直接提供，而是需要通過jquery,JS來實(shí)現(xiàn)。現(xiàn)在我就給大家介紹一下如何實(shí)現(xiàn)這種文字滾屏效果。
我們將在潤乾報(bào)表設(shè)計(jì)器自帶的“設(shè)備故障分析.rpx”基礎(chǔ)上實(shí)現(xiàn)文字滾屏實(shí)例。
對于從數(shù)據(jù)庫讀取的數(shù)據(jù)，可以通過集算器，將數(shù)據(jù)整理成下面截圖中的效果。為了方便做效果，這里我直接將ds2這個(gè)內(nèi)建數(shù)據(jù)中的所有字段的值整理到“設(shè)備”這個(gè)字段中，并且在里面加上了些空格，以便頁面上縮進(jìn)的效果好看些。
?
將G15列刪除，B15—F15選中，合并。
?
?
4.?設(shè)置單元格表達(dá)式，如上圖所示。下面是具體的表達(dá)式。
="<marquee direction='up' scrollamount='6' οnmοuseοver='this.stop()' οnmοuseοut='this.start()'>"+replace(string@q(ds2.select(設(shè)備)),",","<br>")+"</marquee>"
其中：
οnmοuseοver=this.stop()表示當(dāng)鼠標(biāo)以上區(qū)域的時(shí)候滾動停止；
οnmοuseοut=this.start()表示當(dāng)鼠標(biāo)移開的時(shí)候繼續(xù)滾動。?
原B15-F15設(shè)置了各行異色，因?yàn)槲覀兊奈淖譂L動項(xiàng)作為統(tǒng)一的一串內(nèi)容，所以按照以上設(shè)置，效果感覺會有些突兀，如下圖所示。
?
去掉B15-F15背景色的設(shè)置，這樣滾動區(qū)域就整體渾然一體。
?
經(jīng)過以上步驟我們的數(shù)據(jù)列表就在DBD面板中滾動起來了，并且當(dāng)鼠標(biāo)指向數(shù)據(jù)的時(shí)候就會停止?jié)L動，鼠標(biāo)移開的時(shí)候就繼續(xù)滾動了，這樣的交互效果無疑會為你的大屏展現(xiàn)錦上添花。
上面這個(gè)小例子簡單實(shí)現(xiàn)了文字滾動顯示的效果。下面我具體講解下看似神奇的<marquee>標(biāo)簽的各個(gè)屬性值，相信看過后一定會幫助您實(shí)現(xiàn)更好的文字滾動效果：
<marquee>是成對出現(xiàn)的標(biāo)簽，首標(biāo)簽<marquee>和尾標(biāo)簽</marquee>之間的內(nèi)容就是滾動內(nèi)容。<marquee>標(biāo)簽的屬性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它們都是可選的。?
?
?
| 屬性值 | 功能簡述 | 屬性值 | 示例 |
| behavior | 滾動的方式 | alternate、scroll、slide，分別表示文字來回滾動、單方向循環(huán)滾動、只滾動一次，scroll和slide的滾動方向?qū)⒁勒誨irection屬性中參數(shù) | ?<marquee?behavior="alternate">我來回滾動</marquee>? |
| bgcolor | 文字滾動范圍的背景顏色 | 參數(shù)值是16進(jìn)制(形式:#AABBCC或#AA5566等)或預(yù)定義的顏色名字(如red、yellow、blue等) | <marquee?behavior=="slide" direction="left" bgcolor="red">我的背景色是紅色的</marquee>? |
| direction | 文字滾動的方向 | 屬性的參數(shù)值有down、left、right、up共四個(gè)單一可選值， | <marquee direction="right">我向右滾動</marquee> |
| width、height | 決定滾動文字在頁面中的矩形范圍大小。 | 正數(shù) | ?<marquee?width="300" height="30" bgcolor="red">我寬300像素，高30像素。</marquee> |
| hspace，vspace | 滾動矩形區(qū)域距周圍的空白區(qū)域 | 正數(shù) | ????<marquee?width="300" height="30" vspace="10" hspace="10" bgcolor="red">我矩形邊緣水平和垂直距周圍各10像素。</marquee>? |
| loop | 滾動文字的滾動次數(shù) | 正整數(shù) | <marquee?loop="2">我滾動2次。</marquee>? |
| scrollamount | 文字滾動的速度(scrollamount) | 正整數(shù) | ?<marquee?scrollamount="100">我速度很快.</marquee>? |
| scrolldelay | 延時(shí) | 正整數(shù) | ???<marquee?scrolldelay="30">我小步前進(jìn)。</marquee>? |
另外，您也可以將<marquee>和</marquee>之間的內(nèi)容替換成圖像或其它對象。
怎么樣，是不是您已經(jīng)在摩拳擦掌躍躍欲試了？別猶豫，讓我們一起來豐富Dashboard效果，讓頁面效果動起來吧！
轉(zhuǎn)載于:https://www.cnblogs.com/shiGuangShiYi/p/9815147.html
總結(jié)
以上是生活随笔為你收集整理的报表怎样实现滚动的公告效果？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AD属性修改 office 365 de
- 下一篇： Coding and Paper Let