10行原生JS实现文字无缝滚动

来源：互联网发布：app 实时数据展示页面编辑：程序博客网时间：2024/05/14 14:18

废话不多说，直接上代码

<section class="pro_quota_tip">  <div class="tip_box">    <a href="javascript:;">aaaaaaaaa</a>    <a href="javascript:;" >bbbbbbbbbbbbbb</a>    <a href="javascript:;">ccccccccccc</a>    <a href="javascript:;">ddddddddddddddd</a>    <a href="javascript:;">aaaaaaaaaaaaaa</a>  </div></section>

body,#app{    margin: 0;    padding: 0;    font-family:Helvetica;    background: #f0efef !important;    width: 100%;    overflow-x: hidden;}a{  text-decoration: none;}.pro_quota_tip{    background: #fff;    font-size: 14px;    overflow: hidden;    width: 200px;    height: 49px;    margin:0 auto;    margin-top:10%}.pro_quota_tip .tip_box{    position: relative;}.pro_quota_tip .tip_box a{    color: red;    display: block;    width: 100%;    padding:15px 5px;    white-space:nowrap;    overflow:hidden;    text-overflow:ellipsis;}

var tip_box_a_h = document.querySelectorAll('.tip_box a')[0].offsetHeight;var i=0;setInterval(()=>{  let startScroll = setInterval(()=>{    i++;    document.querySelector('.tip_box').style.bottom = (tip_box_a_h/10)*i+'px';    if(i%10==0)clearInterval(startScroll);  },50)  if(i>(10*(document.querySelectorAll('.tip_box a').length-2)))i = 0;},2500)

绝对的10行，简单实用，无依赖

阅读全文

1 0