js-无缝向上滚动

这种节奏经常用在相同布局内容多的地方，列如排行榜，新闻等地方。为了效率，在此做个笔记

 

 

HTML:

 

<div id="divgd">
        <div id="boxmiddle">
                 <div id="box1samlle">
                              <span><label>王芳王芳王芳王芳王芳王芳</label>156****9707<label>护肤礼包</label></span>
                              <span><label>留校留校留校留校</label>156****9707<label>护肤礼包护肤礼包护肤礼包护肤礼包</label></span>
                              <span><label>阿雅阿雅阿雅阿雅阿雅阿雅</label>156****9707<label>护肤礼包</label></span>
                              <span><label>韩语</label>156****9707<label>护肤礼包</label></span>
                              <span><label>小刘</label>156****9707<label>护肤礼包</label></span>
                              <span><label>张小泉</label>156****9707<label>护肤礼包护肤礼包护肤礼包护肤礼包护肤礼包护肤礼包</label></span>
                              <span><label>兰国富兰国富兰国富兰国富兰国富</label>156****9707<label>护肤礼包</label></span>
                              <span><label>草尼玛草尼玛草尼玛草尼玛</label>156****9707<label>护肤礼包</label></span>
                              <span><label>菊花</label>156****9707<label>护肤礼包</label></span>
                              <span><label>兰花</label>156****9707<label>护肤礼包</label></span>
                 </div>
                <div id="addbox1"></div>
     </div>
</div>

 

 

 

 

CSS:

 

#divgd {width: 78%;height: 26rem;overflow: hidden;color: #333;margin: 0 auto;font-size: 1rem;}
#boxmiddle {width: 100%;height: 800%;background: pink;}


#box1samlle,
#addbox1 {float: left;display: block;width: 100%;}


#box1samlle span,
#addbox1 span {float: left;width: 100%;display: block;text-align: center;height: 3rem;line-height: 3rem;}


#box1samlle span label,
#addbox1 span label {display: inline-block;width: 30%;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}


#box1samlle span label:nth-of-type(1),
#addbox1 span label:nth-of-type(1) {float: left;}


#box1samlle span label:nth-of-type(2),
#addbox1 span label:nth-of-type(2) {float: right;}

 

 

JS:

 

var speed1 = 60;
var demo = document.getElementById("divgd");
var demo1 = document.getElementById("box1samlle");
var demo2 = document.getElementById("addbox1");
demo2.innerHTML = demo1.innerHTML;
     if(document.querySelectorAll("span").length>=20){
          var MyMar = setInterval(Marquee, speed1);
     }else{

     }
    function Marquee() {
           if(demo2.offsetHeight - demo.scrollTop <= 0) {
                 demo.scrollTop -= demo1.offsetHeight
          } else {
                 demo.scrollTop++;
           }
     }

   //下面的一般用在电脑端鼠标事件

 

    demo.onmouseover = function() {
        clearInterval(MyMar)
    };
    demo.onmouseout = function() {
           MyMar = setInterval(Marquee, speed1);
    }