[轉]字幕特效Marquee的通用js类(兼容多浏览器)

轉自:http://www.sifung.com/pages/693.shtm

主要是因为IE里的Marquee不具有通用性,在其它浏览器下无法正常工作,故用JavaScript把它的功能重写了一下,支持多浏览器! 其功能已封装到Marquee.js中,支持无间断滚动(默认),如果字幕区域里的内容 长/宽 度 小于字幕区域设置的 长/宽 度 ,则默认不滚动! 支持动态更新滚动速度和方向!

Marquee.js

参数说明:
demo 字幕区域标签(div)的ID;
demo1/demo2 显示内容标签(div或td)的ID demo1为原始内容,demo2是它的拷贝;
direction 字幕方向(up,down,left,right) ;
delay 字幕播放的延迟时间(毫秒);
step 字幕播放的步长(即pix,步长越小,如step=1,滚动越平滑)

/***********************************************************************************************
obj__字幕區域標籤(div)的ID;
obj1__/obj2__顯示內容標籤(div或td)的ID obj1__為原始內容,obj2__是它的拷貝;
direction__字幕方向(up,down,left,right) ;
delay__字幕播放的延遲時間(毫秒);
step__字幕播放的步長(即pix,步長越小,如step__=1,滾動越平滑)
**************************************************************************************************/
function Marquee(obj__, obj1__, obj2__, direction__, delay__, step__) {
direction__ = direction__.toLowerCase();

if (((direction__ == "up" || direction__ == "down") && ($(obj1__).offsetHeight > $(obj__).offsetHeight)) || ((direction__ == "left" || direction__ == "right") && ($(obj1__).offsetWidth > $(obj__).offsetWidth))) {
$(obj2__).innerHTML = $(obj1__).innerHTML;
if (direction__ == "down")
$(obj__).scrollTop = 2 * $(obj1__).offsetHeight - $(obj__).offsetHeight;
if (direction__ == "right")
$(obj__).scrollLeft = 2 * $(obj1__).offsetWidth - $(obj__).offsetWidth;
}
else
return;

var flag = true;
var speed = delay__ == null ? 1 : parseInt(delay__);
var amount = step__ == null ? 1 : parseInt(step__);

var Marquee = function() {
switch (direction__) {
case "up":
if ($(obj2__).offsetTop - $(obj__).scrollTop <= 0)
$(obj__).scrollTop -= $(obj1__).offsetHeight;
else
$(obj__).scrollTop += amount;
break;
case "down":
if ($(obj1__).offsetTop - $(obj__).scrollTop >= 0)
$(obj__).scrollTop += $(obj2__).offsetHeight;
else
$(obj__).scrollTop -= amount;
break;
case "left":
if ($(obj2__).offsetWidth - $(obj__).scrollLeft <= 0)
$(obj__).scrollLeft -= $(obj1__).offsetWidth;
else
$(obj__).scrollLeft += amount;
break;
case "right":
if ($(obj__).scrollLeft <= 0)
$(obj__).scrollLeft += $(obj2__).offsetWidth;
else
$(obj__).scrollLeft -= amount;
break;
default: break;
}
}

var timer = setInterval(Marquee, speed);

var play = function() {
if (flag) {
clearInterval(timer);
timer = setInterval(Marquee, speed);
}
}

$(obj__).onmouseover = function() {
if (flag)
clearInterval(timer);
}

$(obj__).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里截过来的 呵呵)

function Ruby() {
}
if (!Array.prototype.push) {
Array.prototype.push = function() {
var startLength = this.length;
for (var i = 0; i < arguments.length; i++)
this[startLength + i] = arguments[i];
return this.length;
}
}

$ = function() {
var elements = new Array();

for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);

if (arguments.length == 1)
return element;

elements.push(element);
}

return elements;
}

$F = function() {
if (arguments.length == 1)
return document.getElementById(arguments[0]).value;
else {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
elements.push(document.getElementById(arguments[i]).value);
}
return elements;
}
}
到这里,js文件已经搞定了,开始写HTML代码:

(1)先添加css样式,如果你不想滚动字幕里的内容被无故撑大的话(有时候)
<style>
.wrap{word-break:break-all;overflow:hidden}
</style>

(2)添加js文件 -->用了prototype.js的更好,替换掉Ruby.js :)
<script src="Ruby.js"></script>
<script src="Marquee.js"></script>

(3)添加字幕区域内容
1. 向上或向下滚动
<div id="d1" style="overflow:hidden;height:200px;width:90px">
<div id="d11" width="100%" class="wrap">
=顶部=<br>动感地带资费攻略1 动感地带资费攻略2<br>=底部=
</div>
<div id="d12" width="100%" class="wrap"></div>
</div>
<script>var obj1 = new Marquee("d1","d11","d12","up");</script>
由于字幕d1的height=200,而d11的内容高度不足200,故字幕默认不会滚动,要实现滚动的话,只需d11的height>200就行了,故只需在d11的里面再放个空div就行了,让它的height=200; 如果d11的内容高度大于了200px,则字幕区域d1将无间断滚动

2. 向左或向右滚动

<div id="d2" style="overflow:hidden;width:500">
<table>
<tr>
<td id="d21">
<nobr>
[开始]动感地带资费攻略1 动感地带资费攻略2 动感地带资费攻略3 动感地带资费攻略4 动感地带资费攻略5 动感地带资费攻略6 动感地带资费攻略7 动感地带资费攻略8 动感地带资费攻略9 动感地带资费攻略10 动感地带资费攻略11 动感地带资费攻略12 动感地带资费攻略13 动感地带资费攻略14 动感地带资费攻略15 动感地带资费攻略16 动感地带资费攻略17 动感地带资费攻略18 动感地带资费攻略19 动感地带资费攻略20[结束]　
</nobr>
</td>
<td id="d22"></td>
</tr>
</table>
</div>
<script>var obj2 = new Marquee("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");