前端学习----实现跑马灯的三种方式

Posted 2021-03-05 57one

参考博客:https://segmentfault.com/a/1190000016903385?utm_source=tag-newest
文中提出了三种实现跑马灯的方式,分别是1.利用js实现2.利用html标签实现3.利用css实现 文中也给出了3种方法优劣的比较,这里不再赘述

1.利用js实现跑马灯

    <div id="move">三玖是我老婆,春日野穹是我妹妹</div>
    #move{position: absolute;width: 230px;background: grey;color:white;}

    window.onload=function(){
            var move=document.getElementById('move');
            move.style.right='-230px';
            moveRight();
        }
        function moveRight(){
            if(parseInt(move.style.right)>screen.width) {
                move.style.right='0';
            }
            move.style.right=parseInt(move.style.right)+3+'px';
            setTimeout(moveRight,10);
        }

这个就是利用js操控dom元素的属性 利用setTimeout调用自己 不断改变right的大小进行移动

2.利用html 实现

这个是利用marquee标签实现 

3.利用css 实现

//html  
<div id="move">
    <div id="cont">三玖是我老婆,春日野穹是我妹妹</div>
</div>
// css
#move{
    position: relative;
    width: 230px;
    height: 40px;
    background: grey;
    color:white;
     }
#cont{

    position:absolute;
    left: 0;
    right: 0;
    transition: left 10s linear;
     }
//js
window.onload=function(){
    var cont=document.getElementById('cont');
    cont.style.left="-230px";
}

利用transition实现跑马灯效果
css实现无缝滚动

//html
<div id="move">
    <div id="cont">
        <div class="text">1三玖是我老婆,春日野穹是我妹妹</div>
        <div class="text">2三玖是我老婆,春日野穹是我妹妹</div>
    </div>
</div>
//css
    *{
        padding: 0;
        margin:0;
    }
    #move{
        position: relative;
        width: 230px;
        height: 20px;
        background: grey;
        color:white;
        overflow: hidden;
    }
    #cont{
        width: 200%;
        height: 20px;
        position:absolute;
        left: 0;
        top: 0;
        animation:5s move infinite linear;
    }
    #cont .text{
        display: inline-block;
        float: left;
        width: 50%;
        height: 20px;
    }
    @keyframes move{
        0%{
            left: 0;
          }
        100%{
            left: -100%;
            }
    }

利用animation实现无缝滚动 当然实际上是利用了2条相同的数据