怎么使用CSS3實現(xiàn)無限循環(huán)的無縫滾動

運行的效果如下：

2. 數(shù)據(jù)不確定時

在上面的小節(jié)中，數(shù)據(jù)是死的，高度也是寫死到了CSS3中?？墒侨绻麖慕涌讷@取到的數(shù)據(jù)個數(shù)不定呢，每條數(shù)據(jù)的長度也不確定，怎么辦呢？

這里就需要根據(jù)數(shù)據(jù)來重新計算高度，并寫到CSS里，可是keyframes修改起來還比較麻煩，那么我們就用覆蓋的方式來重新keyframes中的數(shù)據(jù)：

// 設(shè)置keyframes屬性
function addKeyFrames(y){
    var style = document.createElement('style');
    style.type = 'text/css';
    var keyFrames = '\
    @-webkit-keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }\
    @keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }';
    style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
    document.getElementsByTagName('head')[0].appendChild(style);
}

計算出原始數(shù)據(jù)A的高度后，執(zhí)行 addKeyFrames 方法，往head中添加css屬性，那么這里的rowup就會覆蓋掉之前設(shè)置的，每次滾動的距離就是數(shù)據(jù)A的高度：

function init(){
    var data = '塞下秋來風(fēng)景異，衡陽雁去無留意。四面邊聲連角起，千嶂里，長煙落日孤城閉。濁酒一杯家萬里，燕然未勒歸無計。羌管悠悠霜滿地，人不寐，將軍白發(fā)征夫淚。', //樣例數(shù)據(jù)
        data_len = data.length,
        len = parseInt(Math.random()*6)+6, // 數(shù)據(jù)的長度
        html = '';
    
    for(var i=0; i'+i+'- '+data.substr(start, s)+'';
    }
    html += '';
    document.querySelector('.list .cc').innerHTML = html+html; // 復(fù)制一份數(shù)據(jù)
    var height = document.querySelector('.list .ss').offsetHeight; // 一份數(shù)據(jù)的高度
    addKeyFrames( '-'+height+'px' ); // 設(shè)置keyframes
    document.querySelector('.list .cc').className += ' rowup'; // 添加 rowup
}
init();

3. 橫向滾動

上面講解的都是向上滾動，那么向左，向右，向下也比較容易理解了，把transform中的值更改為對應(yīng)的數(shù)值即可。

以上是“怎么使用CSS3實現(xiàn)無限循環(huán)的無縫滾動”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！