>> 知识广场

JS实现文字列表的无缝滚动效果代码分享

分类：默认 作者：myerob 标签：JS 实现 文字 列表 无缝 滚动 效果 代码 阅读：163 收藏
导读：
本文介绍了JS文字列表无缝滚动的具体代码，供大家参考，具体内容如下:HTML代码：<div id="rule"> <div class="list" id="list"&g…

本文介绍了JS文字列表无缝滚动的具体代码，供大家参考，具体内容如下:

HTML代码：

<div id="rule">
    <div class="list" id="list">
     <p>用户1 获得XXX优惠券</p>
     <p>用户2 获得XXX优惠券</p>
     <p>用户3 获得XXX优惠券</p>
     <p>用户4 获得XXX优惠券</p>

 	 <p>用户5 获得XXX优惠券</p>
     <p>用户6 获得XXX优惠券</p>
     <p>用户7 获得XXX优惠券</p>
     <p>用户8 获得XXX优惠券</p> 
     <p>用户9 获得XXX优惠券</p>
     <p>用户10 获得XXX优惠券</p>
    </div>
  <div class="list2" id="list2"></div>
</div>

JS代码:

var speed=50;
var list=document.getElementById('list');
var list2=document.getElementById('list2');
var rule=document.getElementById('rule');
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)}

 

 

 

相关推荐