marqueebar.js

200708可编程序控制器选课件PLC的课件

///////////////////////////////////////////////
// MarqueeBar
// 编写 静黎明
// 
// 使用:
// (1)构造
//    var marq1 = new MarqueeBar(
//              document.body,  //父容器,MarqueeBar将被添加到此对象内;
//              200,            //MarqueeBar 宽
//              50,             //MarqueeBar 高
//              2000,           //每条新闻的睡眠时间;默认为[MarqueeDefaultSleepTime=2000]毫秒
//              MarqueeBar.H,   //滚动方向 ;MarqueeBar.V 为垂直滚动，Marqueebar.H为水平滚动，默认为水平滚动
//              "center",       //消息的水平靠向,默认中间，也可以为"left"、"right";
//              "middle"     ); //消息的垂直靠向,默认中间，也可以为"top"、"bottom";
//
//  参数后4个可省略其中的 一个 或 全部 ，构造函数为他们准备了默认的数值
//  但请注意省略的方式为依次从后向前;
//
//  (2)MarqueeBar 的特点设定函数（以下函数您可能一个都不需要调用):
//      marq1.setFrameCount(n) ;
//              设定每条消息的滚动需要(n)帧来完成,n默认数值是10;
//      marq1.setScrollDelay(n);
//              设定每帧之间的延迟(n)毫秒;默认值是50毫秒
//	marq1.setSleepTime(sleepTime);
//              设定每条消息的睡眠时间
//	marq1.setBackground("#ffffff url('image/bg.gif') repeat-x");
//              设定MarqueeBar 的CSS背景样式
//	marq1.setBorder("1px solid #000000");
//              设定MarqueeBar 的CSS边框样式; 
//	marq1.setHAlign(halign);
//              设定MarqueeBar的水平靠向
//	marq1.setVAlign(halign);
//              设定MarqueeBar的垂直靠向
//
//  (3)增加新闻:
//      marq1.add(HTML内容,点击当前消息后的Js语句); 
//      例子:  marq1.add("<font style='color:red'>Hello,world</font>","alert('hello,world')");
//
//  (4)最后请调用marq1.start();  新闻就滚动起来啦！
//
//  (5)补充: 当消息休眠时，鼠标浮动到消息上，消息会暂时停止滚动,等待鼠标
//      离开滚动区后，消息滚动恢复。所以很遗憾,如果你设定停留时间很小
//      的话，会失去此功能。
//      最后，小作品是兼容FireFox的。				
//
///////////////////////////////////////////////

var ERROR_CONTAINERNOTFOUND = "父容器未找到";
var ERROR_JSCOMMAND = "错误的Js语句";
var MarqueeCount = 0;
var MarqueeCollection = new Array();
var MarqueeBarNoMsg = "暂时无消息";
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);
	}
}