圖片無(wú)縫滾動(dòng)代碼(向左/向下/向上)_javascript技巧

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:08:25

圖片無(wú)縫滾動(dòng)代碼(向左/向下/向上)_javascript技巧

圖片無(wú)縫滾動(dòng)代碼(向左/向下/向上)_javascript技巧:想必大家都注意到的不循環(huán)滾動(dòng)，所以出現(xiàn)了很多替代腳本，或iframe或JS輸出，不管怎么做，都略顯麻煩。下面說(shuō)一下這個(gè)相對(duì)簡(jiǎn)單的實(shí)現(xiàn)思路：一個(gè)設(shè)定寬度并且隱藏超出它寬度的內(nèi)容的容器demo，里面放demo1和 demo2，demo1是滾動(dòng)內(nèi)容,demo2為demo1的

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀圖片無(wú)縫滾動(dòng)代碼(向左/向下/向上)_javascript技巧:想必大家都注意到的不循環(huán)滾動(dòng)，所以出現(xiàn)了很多替代腳本，或iframe或JS輸出，不管怎么做，都略顯麻煩。下面說(shuō)一下這個(gè)相對(duì)簡(jiǎn)單的實(shí)現(xiàn)思路：一個(gè)設(shè)定寬度并且隱藏超出它寬度的內(nèi)容的容器demo，里面放demo1和 demo2，demo1是滾動(dòng)內(nèi)容,demo2為demo1的

想必大家都注意到的不循環(huán)滾動(dòng)，所以出現(xiàn)了很多替代腳本，或iframe或JS輸出，不管怎么做，都略顯麻煩。下面說(shuō)一下這個(gè)相對(duì)簡(jiǎn)單的實(shí)現(xiàn)思路：一個(gè)設(shè)定寬度并且隱藏超出它寬度的內(nèi)容的容器demo，里面放demo1和 demo2，demo1是滾動(dòng)內(nèi)容,demo2為demo1的直接克隆，通過(guò)不斷改變demo1的scrollTop或者scrollLeft達(dá)到滾動(dòng)的目的，當(dāng)滾動(dòng)至demo1與demo2的交界處時(shí)直接跳回初始位置，因?yàn)閐emo1與demo2一樣，所以分不出跳動(dòng)的瞬間，從而達(dá)到“無(wú)縫”滾動(dòng)的目的。

在原作者的基礎(chǔ)上做了一定修改，主要還是在樣式上面，將表格更換為標(biāo)簽。并且將JavaScript標(biāo)準(zhǔn)化，可以在所有瀏覽器運(yùn)行。

先了解一下對(duì)象的幾個(gè)的屬性： innerHTML:設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的 HTML scrollHeight: 獲取對(duì)象的滾動(dòng)高度。

scrollLeft:設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見(jiàn)內(nèi)容的最左端之間的距離 scrollTop:設(shè)置或獲取位于對(duì)象最頂端和窗口中可見(jiàn)內(nèi)容的最頂端之間的距離 scrollWidth:獲取對(duì)象的滾動(dòng)寬度 offsetHeight:獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度 offsetLeft:獲取對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置 offsetTop:獲取對(duì)象相對(duì)于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置 offsetWidth:獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的寬度
代碼如下:
圖片上無(wú)縫滾動(dòng)

向上滾動(dòng)