原生JS列表自動滾動,帶過渡效果

2021-10-19 01:17:40 字數 807 閱讀 6417

效果:

兩種方式,1)利用css的margin值來實現滾動,2)利用dom元素身上的scrolltop來實現

html

第1行

第2行第3行

第4行第5行

第6行

function cssscroll(rowhei=30,speed=1500,delay=1000) //滑鼠移入,停止滾動

parcont.onmouseout = function() //滑鼠移出,繼續滾動

cont.style.margintop = 0;

cont.style.transition = 'margin 0.3s';

var startscroll = () => else , 10)

} else }}

settimeout(fn => , delay)

} else , 666)}}

第二種:scrolltop屬性

function jsscroll(rowhei=30,speed=1500,delay=1000)

cont.onmouseout = function()

function startscroll() else else

}} settimeout(fn => , delay)

}

原始碼檔案,寫的不錯請來個star

原生 js 實現無縫滾動輪播

上一次我們看了如何實現簡單的輪播圖,以及各種常用的效果實現 這一次,我們看看無縫滾動輪播圖的實現 利用 左邊的margin 來實現 原理 我們建立乙個div,下圖共紅色部分 然後再div中建立乙個,並且裡面放置6個,每個中放置一張,前三張和後三張是重複的,如圖標記1,2,3 我們讓div 裡面超出部...

原生 js 實現無縫滾動輪播

上一次我們看了如何實現簡單的輪播圖,以及各種常用的效果實現 這一次,我們看看無縫滾動輪播圖的實現 利用 左邊的margin 來實現 原理 我們建立乙個div,下圖共紅色部分 然後再div中建立乙個,並且裡面放置6個,每個中放置一張,前三張和後三張是重複的,如圖標記1,2,3 我們讓div 裡面超出部...

自己練習的無縫滾動原生JS

看了妙趣的課堂自己練習的,因為牽涉到遠端就沒利用 title 無標題文件title style div,ul,li,a ul,li roll prev,next prev next scroll scrollul scrollli style script window.onload functio...