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; // 標(biāo)題顯示延遲間隔

//+----------------------------------------------------------------------------

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

每個標(biāo)題間有停留<br />

鼠標(biāo)移入停止，鼠標(biāo)移出繼續(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)達清單招標(biāo)投標(biāo)策略研討會——河南站圓滿成功</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ì)量管理體系三年復(fù)審</a> </div>

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

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

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

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

</span>

<script>

</script>

更多信息請查看IT技術(shù)專欄