CSSASSCSSASSCSSASS

简单效果的简单写法——无缝滚动字幕作者：ONEBOYS

<style> *{padding:0;margin:0;font-size:12px;} #wrap{width:300px;background:#eee;} #wrap li{height:22px;line-height:22px;} </style> <div id="wrap" style="overflow:hidden;height:100px;">  <ul id="box1"> <li>1 <a href="#" title="信息公开工作">信息公开工作</a></li> <li>2 <a href="#" title="信息公开工作">国务院办公厅转发监察部等部门 </a></li> <li>3 <a href="#" title="信息公开工作">我市将严查损害发展环境问题</a></li> <li>4 <a href="#" title="办公时间调整通知">办公时间调整通知</a></li> <li>5 <a href="#" title="办公时间调整通知">办公时间调整通知d</a></li> </ul> <ul id="box2"></ul> </div>  <div id="refer"> </div> <script type="text/javascript"> var speed=50; var $$=function(id){return document.getElementById(id);} $$('box2').innerHTML=box1.innerHTML; function roll(){ if($$('box2').offsetTop-$$('wrap').scrollTop<=0) { //当滚动到第二部分的顶部位置时 $$('wrap').scrollTop-=$$('box1').offsetHeight; //重置至第一部分顶部位置,相当于$$('box').scrollTop=0; } else{ $$('wrap').scrollTop++ ; $$('refer').innerHTML=$$('box2').offsetTop+' '+$$('wrap').offsetHeight+' '+$$('wrap').scrollTop //无他，参考值尔 } } var start=setInterval(roll,speed); $$('wrap').onmouseover=function() {clearInterval(start)}; $$('wrap').onmouseout=function() {start=setInterval(roll,speed)}; </script>

先看看无缝滚动的效果，使用window的setInterval方法重复调用一个滚动函数。
关键的代码是

function roll(){
if($$('box2').offsetTop-$$('wrap').scrollTop<=0) { //当滚动到第二部分的顶部位置时
$$('wrap').scrollTop-=$$('box1').offsetHeight; //重置至第一部分顶部位置,相当于$$('box').scrollTop=0;
}
else{
$$('wrap').scrollTop++ ;
$$('refer').innerHTML=$$('box2').offsetTop+' '+$$('wrap').offsetHeight+' '+$$('wrap').scrollTop //无他，参考值尔
}
}
var start=setInterval(roll,speed);

而无缝的关键还在这里

$$('box2').innerHTML=box1.innerHTML; //拷贝一份内容跟随其后，使原内容之后还有内容

我原本要做的效果并非全如上面，我需要的效果是：单条为一步阶，进行间歇性循环无缝滚动。

其实提起滚动，应该立马会想起走马灯（marquee）。尽管对其一直有偏见，但我还是会给他个机会的。。。

<style> *{padding:0;margin:0;} #quee li{height:30px;line-height:30px;} </style> <div style="border:1px solid #ccc;"> <marquee id="quee" direction=up scrollamount="3"scrolldelay="0" style="height:30px;" > <ul> <li><a href="#">1两会会谈在即陈云抵台台湾警方加强维安。(09-09:15)</a></li> <li><a href="#">2两会会谈在即陈云抵台台湾警方加强维安。(09-09:15)</a></li> <li><a href="#">3两会会谈在即陈云抵台台湾警方加强维安。(09-09:15)</a></li> <li><a href="#">4两会会谈在即陈云抵台台湾警方加强维安。(09-09:15)</a></li> <li><a href="#">5两会会谈在即陈云抵台台湾警方加强维安。(09-09:15)</a></li> <li><a href="#">6两会会谈在即陈云抵台台湾警方加强维安。(09-09:15)</a></li> </ul> </marquee> </div>  <div id="cc"></div> <script type="text/javascript"> var $$=function(id){return document.getElementById(id);} var quee=document.getElementById('quee'); setTimeout(func,1000); function func(){ $$('quee').stop(); setTimeout(func2,1000); $$('cc').innerHTML=$$('quee').scrollTop; //参考值 } function func2(){ $$('quee').start(); setTimeout(func,1000); } </script>

function func(){
$$('quee').stop();
setTimeout(func2,1000);
}
function func2(){
$$('quee').start();
setTimeout(func,1000);
}

延时1秒交叉调用marquee的内置函数start()和stop();

不过，scrollamount影响的步阶不准确啊，而且不能做到无缝么。好，将marquee拖出去斩了（marquee:冤枉啊~~~~~）

下面是新的做法

<style> *{padding:0;margin:0;} #wrap li{height:30px;line-height:30px;} </style> <div id="wrap" style="height:30px;overflow:hidden;background:#eee" >  <ul id="box1"> <li><a href="#">1两会会谈在即陈抵台台湾警方加强维安。(09-09:15)</a></li> <li><a href="#">2两会会谈在即a抵台台湾警方加强维安。(09-09:15)</a></li> <li><a href="#">3两会会谈在即s抵台台湾警方加强维安。(09-09:15)</a></li> </ul> <ul id="box2"> </ul> </div>  <div id="cc"> </div> <script type="text/javascript"> var $$=function(id){return document.getElementById(id);} var start; $$('box2').innerHTML=$$('box1').innerHTML; function roll(){ wrap.scrollTop++; $$('cc').innerHTML=wrap.scrollTop; //无用，纯粹做参考数值 if($$('box1').offsetHeight-wrap.scrollTop>0){ //尚未滚动到第二部分的顶部位置时 if(wrap.scrollTop%wrap.offsetHeight!=0) // { return(setTimeout(roll,20)); //20毫秒即递归一次 } else{ //当滚动的累计距离达到显示域高度的倍数时 return(setTimeout(roll,2000)); //等待2秒才递归调用 } } else{ setTimeout("$$('wrap').scrollTop=0;roll()",2000); } } setTimeout(roll,2000) </script>

function roll(){
wrap.scrollTop++;
if($$('box1').offsetHeight-wrap.scrollTop>0){ //尚未滚动到第二部分的顶部位置时
if(wrap.scrollTop%wrap.offsetHeight!=0) //
{
return(setTimeout(roll,20)); //20毫秒即递归一次
}
else{ //当滚动的累计距离达到显示域高度的倍数时
return(setTimeout(roll,2000)); //等待2秒才递归调用
}
}
else{
setTimeout("$$('wrap').scrollTop=0;roll()",2000);
}
}

运用递归，而没有用setInterval

转发到新浪微博

相关文章:

简单效果——滚动展示

标签： marquee, setInterval, 无缝滚动, 递归

这篇文章发布于 2009年12月29号，星期二，13:24，归类于 javascript。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

3 条评论发表在“简单效果的简单写法——无缝滚动字幕”上

多组无缝滚动效果如何做？说：

2010年01月14日于01:52

如2X5＝10格的，有的需要进行无缝向上滚动，有的不需要，如何做？谢谢！

回复
oneboys 回复:
一月 15th, 2010 at 10:09
呃，之前也没考虑这个。
可以把#box1，#box2以参数形式传入函数roll()中，$$(’box2′).innerHTML=$$(’box1′).innerHTML;这句也放到函数里面。

回复
能做个实例出来吗？说：

2010年01月16日于03:45

本人水平有限，谢谢！

回复

留下回复