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

鼠標移入停止，鼠標移出繼續(xù)滾動<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. 強強聯(lián)手，助推上海建筑領(lǐng)域信息化建設(shè)</a> </div>

<div><a href= target=_blank>3. 廣聯(lián)達清單招標投標策略研討會——河南站圓滿成功</a> </div>

<div><a href= target=_blank>4. 足球友誼賽：河北電建一公司 vs 廣聯(lián)達石家莊分公司</a> </div>

<div><a href= target=_blank>5. 廣聯(lián)達——清單算量軟件 gcl7.0新版出爐！</a> </div>

<div><a href= target=_blank>6. 喜報：廣聯(lián)達公司順利通過iso9000質(zhì)量管理體系三年復審</a> </div>

<div><a href= target=_blank>7. 廣聯(lián)達-清單整體解決方案在北京求實造價咨詢公司的成功應用</a> </div>

<div><a href= target=_blank>8. 廣聯(lián)達－施工項目成本管理系統(tǒng)（gcm）在榮尊堡工程中的應用</a> </div>

<div><a href= target=_blank>9. 廣聯(lián)達-工程概預算軟件在北京建工集團總公司東方廣場工程的應用</a> </div>

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

</span>

<script>

</script>