Js實現內容向上無縫迴圈滾動

2022-03-11 14:53:37 字數 1087 閱讀 2140

當前專案有乙個類似公告向上滾動的需求,在網上搜尋到乙個比較棒的程式,現摘錄如下:

//

document.getelementbyid()的最簡化應用

function

$(element)

return

elements;

}if (typeof element == "string")

else}//

類建立函式

var class =

}}//

物件屬性方法擴充套件

function.prototype.bind = function

(object)

}var scroll =class.create();

scroll.prototype =.bind(this

); },

scroll:

function

()

else

if (this.counter < this

.height)

else

},stop:

function

() }

new scroll('a', 22, 1) //適當調整第2和第3個引數呈現效果稍有差異

對應html和css如下:

ul 

li <

ul id

="a"

>

<

li>1-1

li>

<

li>1-2

li>

<

li>1-3

li>

<

li>1-4

li>

ul>

在使用上面示例程式過程中注意下面這個自定義行為可能會與jquery或其他js庫或程式發生命名衝突

function$(element) 

解決方案1:將function $(element)重新命名

解決方案2:對於引入了jquery庫的專案,可用jquery.noconflict()方法讓渡變數$的jquery控制權

js 無縫向上滾動

這種節奏經常用在相同布局內容多的地方,列如排行榜,新聞等地方。為了效率,在此做個筆記 王芳王芳王芳王芳王芳王芳 label 156 9707 label 護膚禮包 label span span label 留校留校留校留校 label 156 9707 label 護膚禮包護膚禮包護膚禮包護膚禮包...

頁面列表實現向上無縫滾動

class hello id container content1 v for item,index in list key index li ul div content2 div div template export default,mounted else 定時器 var timer set...

停頓的JS文字滾動,無縫迴圈滾動

間斷滾動 title style marquee marquee div style head body divid marquee divstyle width 260px height 88px font size 3 face 楷體 gb2312 橫向的資料全部顯示的時候就由上往下豎著排列由左...