用CSS3实现无限循环的无缝滚动的示例代码

时间:2017-11-15

计算出原始数据A的高度后,执行 addKeyFrames 方法,往head中添加css属性,那么这里的rowup就会覆盖掉之前设置的,每次滚动的距离就是数据A的高度:

function init(){
    var data = '塞下秋来风景异,衡阳雁去无留意。四面边声连角起,千嶂里,长烟落日孤城闭。浊酒一杯家万里,燕然未勒归无计。羌管悠悠霜满地,人不寐,将军白发征夫泪。', //样例数据
        data_len = data.length,
        len = parseInt(Math.random()*6)+6, // 数据的长度
        html = '<div class="ss">';
    
    for(var i=0; i<len; i++){
        var start = parseInt( Math.random()*(data_len-20) ),
            s = parseInt( Math.random()*data_len );
        html += '<div class="item"v>'+i+'- '+data.substr(start, s)+'</div>';
    }
    html += '</div>';
    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(); 

3. 横向滚动

上面讲解的都是向上滚动,那么向左,向右,向下也比较容易理解了,把transform中的值更改为对应的数值即可。

4. 总结

使用CSS来进行动画的展示,会让页面显得更加流畅。如果能用CSS实现,可以尝试尽量用CSS实现下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

  • 共2页:
  • 上一页
  • 2/2下一篇
    上一篇:浅谈前端开发中容易被忽略CSS特性 下一篇:css解决font-weight:blod跳动问题的解决

    相关文章

    最新文章