消息滚动封装类,兼容Firefox
from: http://bbs.51js.com/viewthread.php?tid=30299
<script>
var ERROR_CONTAINERNOTFOUND = "container not found";
var ERROR_JSCOMMAND = "Error in js Command";
var MarqueeCount = 0;
var MarqueeCollection = new Array();
var MarqueeBarNoMsg = "no message";
var MarqueeDefaultSleepTime = 2000;
function MarqueeBar(srcParElem,barWidth,barHeight,sleepTime,scrollDir,halign,valign)
{
this.mID;
this.container = srcParElem;
this.width = barWidth;
this.height = barHeight;
this.sleepTime = (sleepTime == undefined)? MarqueeDefaultSleepTime : Math.abs(sleepTime);;
this.hAlign = (halign == undefined)? "LEFT" : halign;
this.vAlign = (valign == undefined)? "MIDDLE" : valign;
this.direction = (scrollDir == undefined||(scrollDir != MarqueeBar.H && scrollDir != MarqueeBar.V))? MarqueeBar.H : scrollDir;
this.marqueeBar = null;
this.msgContainer = null;
this.templateRow = null;
this.status = -1;
this.frameCount = 10;
this.scrollDelay = 50;
this.msgQueue = [];
this.step;
this.setTm
this.init = function()
{
if(typeof this.container == "string")
{
this.container = document.getElementById(this.container);
}
if(this.container == undefined)
{
alert("Error: " + ERROR_CONTAINERNOTFOUND);
return -1;
}
this.setFrameCount(this.frameCount);
this.marqueeBar = document.createElement("DIV");
with(this.marqueeBar)
{
style.top = "0px";
style.left = "0px";
style.width = this.width + "px";
style.height = this.height + "px";
style.overflow = "hidden";
style.position = "relative";
}
if(this.container.style.position == "block" ||
this.container.style.position == "")
{
this.container.style.position = "relative";
}
this.style = this.marqueeBar.style;
this.container.appendChild(this.marqueeBar);
this.msgContainer = document.createElement("TABLE");
with(this.msgContainer)
{
cellPadding = 0;
cellSpacing = 0;
style.top = 0;
style.left = 0;
style.width = "100%";
style.position = "relative";
style.overflowX = "hidden";
style.tableLayout = "fixed";
}
this.marqueeBar.appendChild(this.msgContainer);
var msgTemp = this.msgContainer.insertRow(0).insertCell(0);
this.setStyle(msgTemp);
MarqueeCollection[(this.mID = MarqueeCount++)] = this;
}
this.add = function(label,link)
{
this.msgQueue.push(new Array(label,link));
}
this.start = function()
{
if(this.status > 0 && this.start.caller != MarqueeBar ||
this.container == undefined)
{
return;
}
if(this.status == 0)
{
this.restart();
return;
}
this.status = 1;
this.run();
}
this.run = function()
{
if(this.status == 0)
{
return;
}
//消息数为0，转到休眠,并等待是否有新消息;
if(this.msgQueue.length == 0)
{
this.msgContainer.rows[0].cells[0].innerHTML = MarqueeBarNoMsg;
this.msgContainer.rows[0].cells[0].reflectClass = this;
this.sleep();
return;
}
Js.removeListener(this.msgContainer.rows[0].cells[0],"mouseover",MarqueeBar.pause,false);
Js.removeListener(this.msgContainer.rows[0].cells[0],"mouseout",MarqueeBar.restart,false);
var newMsg = (this.direction == MarqueeBar.H)? this.msgContainer.insertRow(1).insertCell(0) : this.msgContainer.rows[0].insertCell(1);
newMsg.reflectClass = this;
newMsg.innerHTML = "<SPAN style='width:100%;' onclick=Javascript:{try{eval(\"" + this.msgQueue[0][1] + "\");}catch(ex){alert(\"错误命令:\"+ex.description);}} style='cursor:hand'>"
+ this.msgQueue[0][0]
+ "</SPAN>";
this.setStyle(newMsg);
this.move();
}
this.move = function()
{
if(this.status == 0)
{
return;
}
if(this.direction == MarqueeBar.H)
{
if(Math.abs(this.msgContainer.offsetTop - this.step) < this.height)
{
this.msgContainer.style.top = this.msgContainer.offsetTop - this.step;
setTimeout("MarqueeCollection["+this.mID+"].move()",this.scrollDelay);
}
else
{
this.msgContainer.deleteRow(0);
this.msgContainer.style.top = 0;
this.msgQueue.push(this.msgQueue.shift());
if(this.status == 1)
this.sleep();
}
}
else if(this.direction == MarqueeBar.V)
{
if(Math.abs(this.msgContainer.offsetLeft - this.step) < this.width)
{
this.msgContainer.style.left = this.msgContainer.offsetLeft - this.step;
setTimeout("MarqueeCollection["+this.mID+"].move()",this.scrollDelay);
}
else
{
this.msgContainer.rows[0].deleteCell(0);
this.msgContainer.style.left = 0;
this.msgQueue.push(this.msgQueue.shift());
if(this.status == 1)
this.sleep();
}
}
}
this.sleep = function()
{
Js.addListener(this.msgContainer.rows[0].cells[0],"mouseover",MarqueeBar.pause,false);
Js.addListener(this.msgContainer.rows[0].cells[0],"mouseout",MarqueeBar.restart,false);
if(this.sleep.caller == null)
{
return;
}
this.setTm = setTimeout("MarqueeCollection["+this.mID+"].run()",this.sleepTime);
}
this.pause = function()
{
clearTimeout(this.setTm);
this.status = 0;
}
this.restart = function()
{
if(this.status == 1)
{
return;
}
this.setTm = setTimeout("MarqueeCollection["+this.mID+"].run()",this.sleepTime);
this.status = 1;
}
this.setStyle = function(obj)
{
obj.style.overflow = "hidden";
obj.style.width = this.width + "px";
obj.style.height = this.height + "px";
obj.style.font = "12px Verdana";
try
{ obj.align = this.hAlign; }
catch(ex)
{ obj.align = "LEFT"; }
try
{ obj.parentNode.vAlign = this.vAlign; }
catch(ex)
{ obj.parentNode.vAlign = "MIDDLE"; }
}
this.setSleepTime = function(t)
{
this.sleepTime = Math.abs(t);
}
this.setFrameCount = function(n)
{
this.frameCount = Math.abs(n);
this.step = Math.floor(((this.direction == MarqueeBar.H)? this.height : this.width) / this.frameCount);
if(this.step == 0)this.step = 1;
}
this.setScrollDelay = function(n)
{
this.scrollDelay = Math.abs(n);
}
this.setHAlign = function(halign)
{
this.hAlign = halign;
}
this.setVAlign = function(valign)
{
this.vAlign = valign;
}
this.setBackground = function(bgStyle)
{
this.marqueeBar.style.background = bgStyle;
}
this.setBorder = function(borderStyle)
{
this.marqueeBar.style.border = borderStyle;
}
this.init();
}
MarqueeBar.H = MarqueeBar.h = "HORIZONTAL";
MarqueeBar.V = MarqueeBar.v = "VERTICAL";
MarqueeBar.pause = function()
{
var srcElement = Js.getSrcElement(arguments[0]);
while(srcElement.parentNode != null && srcElement.reflectClass == null)
{
srcElement = srcElement.parentNode;
}
if(srcElement.reflectClass != undefined)
{
srcElement.reflectClass.pause();
}
}
MarqueeBar.restart = function()
{
var srcElement = Js.getSrcElement(arguments[0]);
while(srcElement.parentNode != null && srcElement.reflectClass == null)
{
srcElement = srcElement.parentNode;
}
if(srcElement.tagName == "TD")
{
srcElement.reflectClass.restart();
}
}
function Js(){}
Js.getSrcElement = function(e)
{
return (e.target == null)? e.srcElement: e.target;
}
Js.addListener = function(srcObj,evt,dstFunc,flag)
{
if(srcObj.attachEvent)
{
srcObj.attachEvent("on"+evt,dstFunc);
}
else if(srcObj.addEventListener)
{
srcObj.addEventListener(evt,dstFunc,flag);
}
}
Js.removeListener = function(srcObj,evt,dstFunc,flag)
{
if(srcObj.attachEvent)
{
srcObj.detachEvent("on"+evt,dstFunc);
}
else if(srcObj.removeEventListener)
{
srcObj.removeEventListener(evt,dstFunc,flag);
}
}
</script>
<body>
<BR><BR>
<table><tr height=50>
<td id="v"><BR></td>
</tr>
<tr>
<td id="v2" height=50><BR></td>
</tr>
</table>
<script>
window.onload = function()
{
var m1 = new MarqueeBar("v",150,50,2000,MarqueeBar.H);
m1.setBorder("1px solid #000000");
m1.setBackground("#ffffff");
m1.setHAlign("CENTER");
m1.setVAlign("MIDDLE");
m1.add("<img src='http://218.25.10.7:8080/2221.gif' align=absmiddle> 大家好，哈哈哈","alert('大家好，哈哈哈')");
m1.add("<img src='http://218.25.10.7:8080/2222.gif' align=absmiddle> 请多多照顾哦~","alert('请多多照顾哦~')");
m1.add("<img src='http://218.25.10.7:8080/2223.gif' align=absmiddle> 没人捧场~","alert('没人捧场~-_-||')");
m1.start()
////
var m1 = new MarqueeBar("v2",150,50,2000,MarqueeBar.V);
m1.setBorder("1px solid #000000");
m1.setBackground("#ffffff");
m1.setHAlign("CENTER");
m1.setVAlign("MIDDLE");
m1.add("<img src='http://218.25.10.7:8080/2221.gif' align=absmiddle> 大家好，哈哈哈","alert('大家好，哈哈哈')");
m1.add("<img src='http://218.25.10.7:8080/2222.gif' align=absmiddle> 请多多照顾哦~","alert('请多多照顾哦~')");
m1.add("<img src='http://218.25.10.7:8080/2223.gif' align=absmiddle> 没人捧场~","alert('没人捧场~~-_-||')");
m1.start()
}
</script>
