補充marquee滾動,實現無縫

2021-08-31 10:10:48 字數 797 閱讀 2107

想必大家都注意到的不迴圈滾動,所以出現了很多替代指令碼,或iframe或js輸出,不管怎麼做,都略顯麻煩。下面說一下這個相對簡單的實現思路:乙個設定寬度並且隱藏超出它寬度的內容的容器demo,裡面放demo1和demo2,demo1是滾動內容,demo2為demo1的直接轉殖,通過不斷改變demo1的scrolltop或者scrollleft達到滾動的目的,當滾動至demo1與demo2的交界處時直接跳回初始位置,因為demo1與demo2一樣,所以分不出跳動的瞬間,從而達到「無縫」滾動的目的。

先了解一下物件的幾個的屬性:

innerhtml:設定或獲取位於物件起始和結束標籤內的 html

scrollheight: 獲取物件的滾動高度。

scrollleft:設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離

scrolltop:設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離

scrollwidth:獲取物件的滾動寬度

offsetheight:獲取物件相對於版面或由父座標 offsetparent 屬性指定的父座標的高度

offsetleft:獲取物件相對於版面或由 offsetparent 屬性指定的父座標的計算左側位置

offsettop:獲取物件相對於版面或由 offsettop 屬性指定的父座標的計算頂端位置

offsetwidth:獲取物件相對於版面或由父座標 offsetparent 屬性指定的父座標的寬度

好,先看這個向上滾動的**:

向下滾動:

向左滾動:

向右滾動:

原文:

近日研究marquee無縫隙迴圈

近日研究marquee無縫隙迴圈,有些心得 因為是初學js 所以從網上找了不少別人的例子 我發現了一下問題 1.大多數html 不符合w3c的最新標準。2.很多 移植性太差。3.向左迴圈的時候。除用 方式外,必須固定寬度,這樣就不能動態的新增了。基於以上我修改了 但願能給大家帶來方便。一 向左迴圈 ...

vue實現無縫滾動功能

發現element和iview都沒問無縫滾動的特效,只有走馬燈的,最近需要用到無縫滾動的特效,就在npm上找了乙個外掛程式 vue seamless scroll 我是在nuxt裡用的 1.安裝 yarn add vue seamless scroll2.在plugins裡新建vue seamles...

flex布局實現無縫滾動

案例的演示 flex布局 所謂flex布局就是彈性盒布局,這種布局在移動端比較常用,但隨著瀏覽器的版本更新,flex布局因為自身的優點,日漸常用。思路 首先分析這個小demo的結構,上下結構,我們可以用乙個容器,將其包裹 就是所謂的大盒子 上方是個導航,上邊是個ul,下面我們就可以用兩個div,寬度...