一叫胖、想要得到的效果:
數(shù)據(jù)在公告欄處由右向左滾動嗤谚,如圖:
二腹鹉、解決思路:
第一次使用的標簽來實現(xiàn)數(shù)據(jù)滾動的藏畅,但是兼容效果不行,支持IE11但是IE9上不會滾動
html用marquee標簽來實現(xiàn)文字滾動屬性,常見參數(shù)如下:
1.滾動方向direction(包括4個值:daoup愉阎、 down绞蹦、 left和 right)
語法:<marquee direction="滾動方向">...</marquee>
2.滾動方式behavior(scroll:循環(huán)滾動,默認效果榜旦; slide:只滾動一次就停止幽七; alternate:來回交替進行滾動)
語法:<marquee behavior="滾動方式">...</marquee>
3.滾動速度scrollamount(滾動速度是設(shè)置每次滾動時移動的長度,以像素為單位)
語法:<marquee scrollamount="5">...</marquee>
4.滾動延遲scrolldelay(設(shè)置滾動的時間間隔溅呢,單位是毫秒)
語法:<marquee scrolldelay="100">...</marquee>
5.滾動循環(huán)loop(默認值是-1澡屡,滾動會不斷的循環(huán)下去)
測試發(fā)現(xiàn)好像無法給滾動的數(shù)據(jù)添加事件且滾動速度無法控制因此做了以下修改,將標簽調(diào)整為div+js的形式實現(xiàn)滾動
在獲取需要滾動的數(shù)據(jù)后調(diào)用使數(shù)據(jù)展示時自動滾動且可以控制滾動速度等咐旧,在運行過程由于業(yè)務(wù)需要會多次調(diào)用刷新加載這個效果導(dǎo)致<div></div>中增加的數(shù)據(jù)原來越多拖慢進程驶鹉。
三、遇到的問題
上面有說铣墨,刷新的次數(shù)越多占用的資源越多執(zhí)行速度越來越慢造成內(nèi)存泄漏室埋,修改處可參照對比圖,最終代碼如下: