圖片無縫滾動代碼(向左/向下/向上)_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 21:08:25

圖片無縫滾動代碼(向左/向下/向上)_javascript技巧

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

推薦度：

點擊下載本文 文檔為doc格式

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

想必大家都注意到的不循環滾動，所以出現了很多替代腳本，或iframe或JS輸出，不管怎么做，都略顯麻煩。下面說一下這個相對簡單的實現思路：一個設定寬度并且隱藏超出它寬度的內容的容器demo，里面放demo1和 demo2，demo1是滾動內容,demo2為demo1的直接克隆，通過不斷改變demo1的scrollTop或者scrollLeft達到滾動的目的，當滾動至demo1與demo2的交界處時直接跳回初始位置，因為demo1與demo2一樣，所以分不出跳動的瞬間，從而達到“無縫”滾動的目的。

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

先了解一下對象的幾個的屬性： innerHTML:設置或獲取位于對象起始和結束標簽內的 HTML scrollHeight: 獲取對象的滾動高度。

scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離 scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離 scrollWidth:獲取對象的滾動寬度 offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度 offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置 offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置 offsetWidth:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的寬度
代碼如下:
圖片上無縫滾動

向上滾動