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

有時候在頁面的某個模組中，需要無限迴圈的滾動一些訊息。那麼如果我們用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:

<

div 
class
="list"
>
<
div 
class
="cc rowup"
>
<
div 
class
="item"
>1- 121233fffffr國家認可更健康進口**困擾
div>
<
div 
class
="item"
>2- 3123233
div>
<
div 
class
="item"
>3- 個人口結構俄跨入國際科技館客人感覺
div>
<
div 
class
="item"
>4- ggrgerg
div>
<
div 
class
="item"
>5- fvdgdv
div>
<
div 
class
="item"
>6- 德國南部巴士與卡車相撞** 31人受傷11人死亡朴槿惠庭審時突然昏迷 支持者：她死了法官要負責！
div>
<
div 
class
="item"
>7- ***再次回應印軍越界:要求立即將越界部隊撤回
div>
<
div 
class
="item"
>8- 德國網紅致信默克爾
div>
<
div 
class
="item"
>9- 國資委原
div>
<
div 
class
="item"
>1- 121233fffffr國家認可更健康進口**困擾
div>
<
div 
class
="item"
>2- 3123233
div>
<
div 
class
="item"
>3- 個人口結構俄跨入國際科技館客人感覺
div>
<
div 
class
="item"
>4- ggrgerg
div>
<
div 
class
="item"
>5- fvdgdv
div>
<
div 
class
="item"
>6- 德國南部巴士與卡車相撞** 31人受傷11人死亡朴槿惠庭審時突然昏迷 支持者：她死了法官要負責！
div>
<
div 
class
="item"
>7- ***再次回應印軍越界:要求立即將越界部隊撤回
div>
<
div 
class
="item"
>8- 德國網紅致信默克爾
div>
<
div 
class
="item"
>9- 國資委原
div>
div>
div>

在上面的小節中，資料是死的，高度也是寫死到了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...