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

网页制作 2024/11/16 佚名

3 1 2

有时候在页面的某个模块中，需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢（比如我们这个模块是向上滚动的）？

克隆A一份完全一样的数据B放在原数据A的后面；
使用setInterval向上滚动A的父级容器；
当向上滚动的距离L正好的A的高度时(L==A.height())，L=0，重新开始滚动，无限循环。

克隆一份数据放在后面，是为了当A向上移动时，后面有数据能填补漏出来的空白。当B移动到可视区域的顶部时，此时A刚好移出可视区域，那么此时将容器重新归0，用户是没有感知的，以为还是B中的第一条数据。然后继续向上滚动。

1. 使用CSS3来实现

若要用CSS3的属性实现的话，非animation莫属，因为transition是需要手动的触发，而且不能无限次执行下去，而animation恰好能解决这个问题。

假如数据是在写死的情况下时，我们完全可以手动复制一份数据放在后面，然后把原数据的高度写到css中，实现的思路与上面的一样：

css:

@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -307px, 0);
        transform: translate3d(0, -307px, 0);
    }
}
.list{
    width: 300px;
    border: 1px solid #999;
    margin: 20px auto;
    position: relative;
    height: 200px;
    overflow: hidden;
}

.list .rowup{
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    position: relative;
}

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>

运行的效果如下：

2. 数据不确定时

在上面的小节中，数据是死的，高度也是写死到了CSS3中。可是如果从接口获取到的数据个数不定呢，每条数据的长度也不确定，怎么办呢？

这里就需要根据数据来重新计算高度，并写到CSS里，可是keyframes修改起来还比较麻烦，那么我们就用覆盖的方式来重新keyframes中的数据：

// 设置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);
}

计算出原始数据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实现下

CSS3无缝循环滚动代码,CSS3无缝循环滚动

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“用CSS3实现无限循环的无缝滚动的实例代码”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

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

css3学习系列之移动属性详解

利用CSS将网站网页变灰色代码示例

评论“用CSS3实现无限循环的无缝滚动的实例代码”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

css3学习系列之移动属性详解

利用CSS将网站网页变灰色代码示例

评论“用CSS3实现无限循环的无缝滚动的实例代码”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存