Marquee.js
参数说明:
demo字幕区域标签(div)的ID;
demo1/demo2显示内容标签(div或td)的IDdemo1为原始内容,demo2是它的拷贝;
direction字幕方向(up,down,left,right);
delay字幕播放的延迟时间(毫秒);
step字幕播放的步长(即pix,步长越小,如step=1,滚动越平滑)
functionMarquee(demo,demo1,demo2,direction,delay,step)
{
direction=direction.toLowerCase();
if(((direction=="up"||direction=="down")&&($(demo1).offsetHeight>$(demo).offsetHeight))||((direction=="left"||direction=="right")&&($(demo1).offsetWidth>$(demo).offsetWidth)))
{
$(demo2).innerHTML=$(demo1).innerHTML;
if(direction=="down")
$(demo).scrollTop=2*$(demo1).offsetHeight-$(demo).offsetHeight;
if(direction=="right")
$(demo).scrollLeft=2*$(demo1).offsetWidth-$(demo).offsetWidth;
}
else
return;
varflag=true;
varspeed=delay==null?1:parseInt(delay);
varamount=step==null?1:parseInt(step);
varMarquee=function()
{
switch(direction)
{
case"up":
if($(demo2).offsetTop-$(demo).scrollTop<=0)
$(demo).scrollTop-=$(demo1).offsetHeight;
else
$(demo).scrollTop+=amount;
break;
case"down":
if($(demo1).offsetTop-$(demo).scrollTop>=0)
$(demo).scrollTop+=$(demo2).offsetHeight;
else
$(demo).scrollTop-=amount;
break;
case"left":
if($(demo2).offsetWidth-$(demo).scrollLeft<=0)
$(demo).scrollLeft-=$(demo1).offsetWidth;
else
$(demo).scrollLeft+=amount;
break;
case"right":
if($(demo).scrollLeft<=0)
$(demo).scrollLeft+=$(demo2).offsetWidth;
else
$(demo).scrollLeft-=amount;
break;
default:break;
}
}
vartimer=setInterval(Marquee,speed);
varplay=function()
{
if(flag)
{
clearInterval(timer);
timer=setInterval(Marquee,speed);
}
}
$(demo).onmouseover=function()
{
if(flag)
clearInterval(timer);
}
$(demo).onmouseout=function()
{
if(flag)
timer=setInterval(Marquee,speed);
}
this.delay=function(s)
{
speed=s==null?50:parseInt(s);
play();
}
this.step=function(s)
{
amount=s==null?1:parseInt(s);
play();
}
this.start=function()
{
if(!flag)
{
flag=true;
play();
}
}
this.stop=function()
{
if(flag)
{
flag=false;
clearInterval(timer);
}
}
this.direction=function(s)
{
s=s.toLowerCase();
if(s==direction)
return;
if(s=="down"&&direction=="up")
direction=s;
if(s=="up"&&direction=="down")
direction=s;
if(s=="right"&&direction=="left")
direction=s;
if(s=="left"&&direction=="right")
direction=s;
if(s==direction)
play();
}
}
上面js里用到的$或$F,如果你用过prototype.js的话,把它添加进去就行了;否则你需要先引用下面的js文件:Ruby.js(从prototype.js里截过来的呵呵)
functionRuby()
{
}
if(!Array.prototype.push){
Array.prototype.push=function(){
varstartLength=this.length;
for(vari=0;i<arguments.length;i++)
this[startLength+i]=arguments[i];
returnthis.length;
}
}
$=function()
{
varelements=newArray();
for(vari=0;i<arguments.length;i++){
varelement=arguments[i];
if(typeofelement==''string'')
element=document.getElementById(element);
if(arguments.length==1)
returnelement;
elements.push(element);
}
returnelements;
}
$F=function()
{
if(arguments.length==1)
returndocument.getElementById(arguments[0]).value;
else
{
varelements=newArray();
for(vari=0;i<arguments.length;i++)
{
elements.push(document.getElementById(arguments[i]).value);
}
returnelements;
}
}
到这里,js文件已经搞定了,开始写HTML代码:
(1)先添加css样式,如果你不想滚动字幕里的内容被无故撑大的话(有时候)
<style>
.wrap{word-break:break-all;overflow:hidden}
</style>
(2)添加js文件-->用了prototype.js的更好,替换掉Ruby.js:)
<scriptsrc="Ruby.js"></script>
<scriptsrc="Marquee.js"></script>
(3)添加字幕区域内容
1.向上或向下滚动
<divid="d1"style="overflow:hidden;height:200px;width:90px">
<divid="d11"width="100%"class="wrap">
=顶部=<br>动感地带资费攻略1动感地带资费攻略2<br>=底部=
</div>
<divid="d12"width="100%"class="wrap"></div>
</div>
<script>varobj1=newMarquee("d1","d11","d12","up");</script>
由于字幕d1的height=200,而d11的内容高度不足200,故字幕默认不会滚动,要实现滚动的话,只需d11的height>200就行了,故只需在d11的里面再放个空div就行了,让它的height=200;如果d11的内容高度大于了200px,则字幕区域d1将无间断滚动
2.向左或向右滚动
<divid="d2"style="overflow:hidden;width:500">
<table>
<tr>
<tdid="d21">
<nobr>
[开始]动感地带资费攻略1动感地带资费攻略2动感地带资费攻略3动感地带资费攻略4动感地带资费攻略5动感地带资费攻略6动感地带资费攻略7动感地带资费攻略8动感地带资费攻略9动感地带资费攻略10动感地带资费攻略11动感地带资费攻略12动感地带资费攻略13动感地带资费攻略14动感地带资费攻略15动感地带资费攻略16动感地带资费攻略17动感地带资费攻略18动感地带资费攻略19动感地带资费攻略20[结束]
</nobr>
</td>
<tdid="d22"></td>
</tr>
</table>
</div>
<script>varobj2=newMarquee("d2","d21","d22","left");</script>
实现原理同上,至于为什么这里要用table而不用div,是因为div在默认情况只能判断height,而不能判断width,而table却恰恰相反,上面用到的nobr标签也是必需的,防止字幕自动换行!
附:更改延迟播放速度obj2.delay(50);或obj2.delay("50");
更改播放步长obj2.step(50);或obj2.step("50");
停止播放obj2.stop();继续播放obj2.start();
更改播放方向(同类型方向)obj2.direction("right");
【兼容多浏览器的字幕特效Marquee的通用js类】相关文章：
★ JavaScript中的fontsize()方法使用介绍
★ 浅谈JavaScript中的Math.atan()方法的使用