How to achieve seamless scrolling of text list in js?-JS Tutorial-php.cn

How to achieve seamless scrolling of text list in js?

零下一度

Release： 2017-06-27 15:36:10

Original

1612 people have browsed it

This article mainly introduces the seamless scrolling effect of js text list, which has certain reference value. Interested friends can refer to it

The example of this article shares with everyone the seamless scrolling effect of js text list. The specific code for scrolling is for your reference. The specific content is as follows

HTML code:

<p id="rule">
        <p class="list" id="list">
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
          <p>用户185****0000  获得XXX优惠券</p>
        </p>
   <p class="list2" id="list2"></p>
</p>

Copy after login

JavaScriptCode

var speed=50;
var list=document.getElementById(&#39;list&#39;);
var list2=document.getElementById(&#39;list2&#39;);
var rule=document.getElementById(&#39;rule&#39;);
list2.innerHTML=list.innerHTML;
function Marquee(){
  if(list2.offsetTop-rule.scrollTop<=0)
    rule.scrollTop-=list.offsetHeight;
  else{
    rule.scrollTop++;
  }
}
var MyMar=setInterval(Marquee,speed);
rule.onmouseover=function() {clearInterval(MyMar)}
rule.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

Copy after login

The above is the detailed content of How to achieve seamless scrolling of text list in js?. For more information, please follow other related articles on the PHP Chinese website!