marquee.htc

代码如下:

// 描述 : 无间断滚动字幕

// 版本 : 2.0

// 作者 : 宝玉(webuc.net)

// 最新更新 : 2004-10-26

// 备 :

<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;

}

//

// cancels an event

//

function f_cancelevent()

{

event.returnvalue = false;

}

//

// a property changed

//

function f_propchange()

{

switch (event.propertyname)

{

default:

f_redraw();

break;

}

}

//

// forces a redraw of the control

//

function f_redraw()

{

}

</script>

html文件

代码如下:

<style>

body,td{

font-size:9pt;

}

.marquee{

overflow-y:hidden;word-break:break-all;padding:10px;

behavior:url('marquee.htc');

}

.marquee div{

padding-bottom:10px;

}

</style>

无间断滚动<br />

每个标题间有停留<br />

鼠标移入停止，鼠标移出继续滚动<br />

<span style=height:100px;width:200px;border:1px solid black; delay=3000 class=marquee onmouseover=this.stop() onmouseout=this.start()>

<div><a href= target=_blank>1. 宝玉()作品</a></div>

<div><a href= target=_blank>2. 强强联手，助推上海建筑领域信息化建设</a> </div>

<div><a href= target=_blank>3. 广联达清单招标投标策略研讨会——河南站圆满成功</a> </div>

<div><a href= target=_blank>4. 足球友谊赛：河北电建一公司 vs 广联达石家庄分公司</a> </div>

<div><a href= target=_blank>5. 广联达——清单算量软件 gcl7.0新版出炉！</a> </div>

<div><a href= target=_blank>6. 喜报：广联达公司顺利通过iso9000质量管理体系三年复审</a> </div>

<div><a href= target=_blank>7. 广联达-清单整体解决方案在北京求实造价咨询公司的成功应用</a> </div>

<div><a href= target=_blank>8. 广联达－施工项目成本管理系统（gcm）在荣尊堡工程中的应用</a> </div>

<div><a href= target=_blank>9. 广联达-工程概预算软件在北京建工集团总公司东方广场工程的应用</a> </div>

<div><a href= target=_blank>10. asdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</a> </div>

</span>

<script>

</script>