marquee.htc

一个漂亮的OA 界面d

<public:component>

<public:attach event="oncontentready" onevent="f_Init()" />
<public:attach event="onpropertychange" onevent="f_PropChange()" />
<public:property name="direction" />
<public:property name="speed" />
<public:property name="delay" />

<public:method NAME="marquee"/>
<public:method NAME="stop"/>
<public:method NAME="start"/>
</public:component>

<script language="JScript">

var _oMarqueeContent;
var _oMarquee;
var _speed = 2;

var _orientation;
var _direction = "up";

var _ContentWidth;
var _ContentHeight;
var _MarqueeWidth;
var _MarqueeHeight;
var _paddingTop;

var _firstNode = 1;
var _count = 0;

var _timer = null;
var _pause = false;

var _marqueeInterval = 100;	// 滚动间隔
var _delayInterval = 2000;	// 标题显示延迟间隔

//+----------------------------------------------------------------------------
//  Function:       f_Init
//  Description:    初始化
//	Parameters:		null
//  Returns:        null
//-----------------------------------------------------------------------------
function f_Init()
{
	
	_oMarquee = document.createElement("div");
	_oMarqueeContent = document.createElement("span");
	_oMarqueeContent.innerHTML = element.innerHTML;
	_oMarquee.appendChild(_oMarqueeContent);
	element.innerHTML = "";
	element.appendChild(_oMarquee);


	if(speed == null) speed = _speed;
	speed = parseInt(speed);
	if(!speed) speed =_speed;

	if(delay == null) delay = _delayInterval;
	delay = parseInt(delay);
	if(!delay) delay = _delayInterval;


	if(direction == null) direction =_direction;
	direction = direction.toLowerCase();
	if(direction != "left" && direction != "right" && direction != "up" && direction != "down")
		direction = _direction;

	_orientation= (direction == "left" || direction == "right") ? "horizontal" : "vertical"
	
	InitMarquee();
	
	marquee();
}

function InitMarquee()
{

	_MarqueeWidth = _oMarquee.offsetWidth;
	_MarqueeHeight = _oMarquee.offsetHeight;
	_count = _oMarqueeContent.children.length;
	
	_ContentWidth = _oMarqueeContent.offsetWidth;
	_ContentHeight = _oMarqueeContent.offsetHeight;	
	
	_paddingTop = _oMarquee.offsetTop;
	
	FillMarquee()

	_oMarqueeContent.style.position = "relative";
	_oMarqueeContent.style.pixelTop = 0;	

}

function FillMarquee()
{
	var children = _oMarqueeContent.children;
	var i = 0;

	if (_orientation== "horizontal")
	{
		while (_oMarqueeContent.offsetWidth < _ContentWidth + _MarqueeWidth)
		{
			_oMarqueeContent.appendChild(children[i++].cloneNode(true));
		}
	}
	else
	{
		while (_oMarqueeContent.offsetHeight < _ContentHeight + _MarqueeHeight)
		{
			_oMarqueeContent.appendChild(children[i++].cloneNode(true));
		}
	}
}

function marquee()
{
	if (_pause)
		return;
		
	switch(direction)
	{
		case "up":
			_oMarqueeContent.style.pixelTop -= speed;
			if(Math.abs(_oMarqueeContent.style.pixelTop + _ContentHeight + _paddingTop) < speed)
				_oMarqueeContent.style.pixelTop = 0;
			
			
			if (Math.abs(_oMarqueeContent.children[_firstNode].offsetTop) - _paddingTop < speed)
			{
				_firstNode++;
				if (_firstNode >= _count)
					_firstNode = 0;
					
				_timer = window.setTimeout(uniqueID + ".marquee()", _delayInterval);
			}
			else
				_timer = window.setTimeout(uniqueID + ".marquee()", _marqueeInterval);
			break;
	}
}

function stop()
{
	clearTimer();
	_pause = true;
}

function start()
{
	if (_timer != null)
		clearTimer();
		
	_pause = false;

	marquee();
	
}

function clearTimer()
{
	window.clearTimeout(_timer);
	_timer = null;
}

function f_CancelEvent()
{
    event.returnValue = false;
}

function f_PropChange()
{
    switch (event.propertyName)
    {
		default:
			f_Redraw();
			break;
    }
}

function f_Redraw()
{

}

</script>