网络编程
位置:首页>> 网络编程>> JavaScript>> js实现文字列表无缝滚动效果

js实现文字列表无缝滚动效果

作者:小太阳zxr  发布时间:2024-04-19 10:16:12 

标签:js,文字,无缝滚动

本文实例为大家分享了js文字列表无缝滚动的具体代码,供大家参考,具体内容如下

HTML代码:


<div id="rule">
   <div 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>
   </div>
 <div class="list2" id="list2"></div>
</div>

JavaScript代码


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)}

来源:http://www.cnblogs.com/zhaixr/p/6731727.html

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com