js跑马灯 页面滚动

没有特别的幸运，那么就特别的努力！！！

既然没有优人的天赋，那就拼吧！
先看下效果：

方式一：html + css

代码部分：

		<div class="newsTip up">
          <p style="color:red;font-size: 26px;">“民法典”生效啦，相关民法典内容已上线</p>
          <p style="color:red;font-size: 26px;">“民法典”生效啦，相关民法典内容已上线</p>
        </div>

 .newsTip {
  position: absolute;
  font-size: 22px;
  line-height: 55px;
  width: 100%;
  color: #2b96fe;
  bottom: 0px;
  text-align: center;
  /*animation: move1 4s infinite;*/
}
.newsTip.up {
  animation: move1 4s infinite;
}
@keyframes move1 {
  from {
    bottom: 0px;
  }
  50% {
    bottom: 55px;
  }
  to {
    bottom: 110;
  }
}

方式二：js实现

html

<div class="test" id="test"></div>

css

.test{
  width: 455px;
  height: 180px;
  position: relative;
  overflow: hidden;
  /* z-index:9; */
}

js

gun("test",400);

//屏幕滚动
  function gun(id,num){  // id定位最大要滚动框(relative)  num滚动高度值
    
    var box=document.getElementById(id);
    function scrollup(){
      // l1.offsetHeight  默认显示屏数据轮流滚动
        if(box.scrollTop>=num){ //滚动条距离顶部的值恰好等于list1的高度时，
        //达到滚动临界点，此时将让scrollTop=0,让list1回到初始位置，实现无缝滚动
            box.scrollTop=0;
        }else{
            box.scrollTop++;
        }
    }
    var scrollMove=setInterval(scrollup,80);//数值越大，滚动速度越慢
    //鼠标经过时，滚动停止
    box.onmouseover=function(){
        clearInterval(scrollMove)
    };
    //鼠标离开时，滚动继续
    box.onmouseout=function(){
        scrollMove=setInterval(scrollup,80);
    }
  }

希望能帮助到大家，同时祝愿大家在开发旅途中愉快！！！

拿着 不谢 请叫我“锤” ！！！