用CSS3實現無限迴圈的無縫滾動

2022-01-19 08:45:52 字數 2243 閱讀 3556

有時候在頁面的某個模組中,需要無限迴圈的滾動一些訊息。那麼如果我們用js實現無縫銜接滾動的思路是什麼呢(比如我們這個模組是向上滾動的)?

轉殖a乙份完全一樣的資料b放在原資料a的後面;

使用setinterval向上滾動a的父級容器;

當向上滾動的距離l正好的a的高度時(l==a.height()),l=0,重新開始滾動,無限迴圈。

轉殖乙份資料放在後面,是為了當a向上移動時,後面有資料能填補漏出來的空白。當b移動到可視區域的頂部時,此時a剛好移出可視區域,那麼此時將容器重新歸0,使用者是沒有感知的,以為還是b中的第一條資料。然後繼續向上滾動。

若要用css3的屬性實現的話,非animation莫屬,因為transition是需要手動的觸發,而且不能無限次執行下去,而animation恰好能解決這個問題。

假如資料是在寫死的情況下時,我們完全可以手動複製乙份資料放在後面,然後把原資料的高度寫到css中,實現的思路與上面的一樣:

css樣式:

@keyframes rowup 

100%

}.list

.list .rowup

html格式:

1- 121233fffffr國家認可更健康進口**困擾

2- 3123233

3- 個人口結構俄跨入國際科技館客人感覺

4- ggrgerg

5- fvdgdv

6- 德國南部巴士與卡車相撞** 31人受傷11人死亡朴槿惠庭審時突然昏迷 支持者:她死了法官要負責!

7- ***再次回應印軍越界:要求立即將越界部隊撤回

8- 德國網紅致信默克爾

9- 國資委原

1- 121233fffffr國家認可更健康進口**困擾

2- 3123233

3- 個人口結構俄跨入國際科技館客人感覺

4- ggrgerg

5- fvdgdv

6- 德國南部巴士與卡車相撞** 31人受傷11人死亡朴槿惠庭審時突然昏迷 支持者:她死了法官要負責!

7- ***再次回應印軍越界:要求立即將越界部隊撤回

8- 德國網紅致信默克爾

9- 國資委原

執行的效果如下檢視例項1:

在上面的小節中,資料是死的,高度也是寫死到了css3中。可是如果從介面獲取到的資料個數不定呢,每條資料的長度也不確定,怎麼辦呢?

這裡就需要根據資料來重新計算高度,並寫到css裡,可是keyframes修改起來還比較麻煩,那麼我們就用覆蓋的方式來重新keyframes中的資料:

// 設定keyframes屬性

function addkeyframes(y)\

100% \

}\@keyframes rowup \

100% \

}';style.innerhtml = keyframes.replace(/a_dynamic_value/g, y);

}

計算出原始資料a的高度後,執行 addkeyframes 方法,往head中新增css屬性,那麼這裡的rowup就會覆蓋掉之前設定的,每次滾動的距離就是資料a的高度:

function init()

html += '

'; document.queryselector('.list .cc').innerhtml = html+html; // 複製乙份資料

var height = document.queryselector('.list .ss').offsetheight; // 乙份資料的高度

addkeyframes( '-'+height+'px' ); // 設定keyframes

document.queryselector('.list .cc').classname += ' rowup'; // 新增 rowup

}init();

可以【檢視例項】,這樣在css3與js的結合下,更完美的呈現無縫滾動。

上面講解的都是向上滾動,那麼向左,向右,向下也比較容易理解了,把transform中的值更改為對應的數值即可。

使用css來進行動畫的展示,會讓頁面顯得更加流暢。如果能用css實現,可以嘗試盡量用css實現下。

用CSS3實現無限迴圈的無縫滾動

有時候在頁面的某個模組中,需要無限迴圈的滾動一些訊息。那麼如果我們用js實現無縫銜接滾動的思路是什麼呢 比如我們這個模組是向上滾動的 轉殖a乙份完全一樣的資料b放在原資料a的後面 使用setinterval向上滾動a的父級容器 當向上滾動的距離l正好的a的高度時 l a.height l 0,重新開...

CSS3實現簡單的無縫輪播效果

由於還沒有接觸到js實現動態效果,但是比較想實現頁面的簡單輪播效果,翻了翻css標籤,發現只有css3也可以實現動畫效果,即通過animation動畫標籤,來實現動態的頁面效果。以下是html模組 charset utf 8 動畫輪播title 以下是css模組 container 起到乙個相框的作...

用CSS3實現鐘錶效果

var olist document.getelementbyid list 獲取到刻度 var ocss document.getelementbyid css var ohour document.getelementbyid hour 獲取時針 var omin document.getele...