文字無限迴圈滾動

2021-09-29 04:21:37 字數 1324 閱讀 4303

在專案實現過程中,需要實現文字垂直迴圈滾動,第一時間想到使用css實現,不過先介紹一下js實現.

注:以下**是基於vue的

1.js實現

原理:

實際上就是乙個計時器定時執行 top ++ ,當執行到底部時,top 值置0,回到頂部繼續執行滾動,但這個會有乙個明顯的缺點,使用者會明顯的的感覺到,滾動到底部時,有乙個跳躍到頂部的過程

實現:      

const timer = setinterval(autoscrollline,30)


/*單行向上滾動效果*/


function autoscrollline() else


}
關鍵點:

1.判斷是否到達底部

2.超出父級高度的內容隱藏,overflow: hidden;

2.css3實現

原理: 利用css3的動畫實現

實現: 

// css **


.rolling 


/*定義動畫*/


@keyframes moving 


to }}
為了在迴圈的時候顯示更自然,需要copy乙份,當迴圈到底部時,緊跟著出現的是copy的第一條資訊,這樣就不會存在js實現中的那種缺陷,使滾動更圓滑,體驗會更好.

值得注意的是,並不是任何時候都需要滾動,如果資料比較少,不足以撐滿整個div,這個時候就不需要copy乙份資料了,這個在下面的**力都有體現

this.isrolling = this.$refs.rollingcontainer.offsetheight - this.rollingheight > 0
父級高度通過內容高度 * 2動態設定,這樣就不需要關注具體的內容行高和資料的多少,體驗會更流暢

this.$refs.rollingcontainer.style.height = this.$refs.rollingcontainer.offsetheight * 2 + 'px';
​


​
當然以上的通過稍微修改也是適用於table或者其他形式的文字滾動的.

這樣的設計使不需要關注內容是什麼格式,內容過長自動換行也好,正好佔滿一行也好,內容不足不滾動,內容較多,自動複製,並啟動滾動,省去了一些無用的操作,當然如果你不是使用vue實現,也沒關係,原理就是這樣,做適當的改變就可以完美使用.

總結,專案實現中,遇到很多奇怪的滾動,這個方式還是可以完美實現滾動的,當然**的優雅度需要改善,但是功能是可以實現的,不存在卡頓和跳躍的情況,當然如果有什麼好的建議歡迎指正,不喜勿噴.

js文字無縫滾動

1 overflow hidden width 128px height 300px 23 90 cellspacing 3 cellpadding 0 border 0 align center class ykxm 孫君洲 1人 2013 09 06到 class xdd ff0000 新訂單 ...

javascript 文字無縫向上滾動

靜態 style height 30px overflow hidden id marquee 第1段p 第2段p 第3段p 第4段p 第5段p div div 解釋 首先最外層是乙個高度只有30px的層，這樣大概只能顯示一行文字。然後裡面有乙個 marquee的層，這個層包含了很多段文字，高度實際...

文字無縫上下滾動

看了好幾個網上的例子，最終得到了想要的效果。啥也不說了，記錄有效的 直接放 html 188 1865剛剛在貸款超市成功借款5000元 155 1899剛剛在貸款超市成功借款8000元 156 8899剛剛在貸款超市成功借款8000元 135 3999剛剛在貸款超市成功借款8000元 css suc...