marquee.htc
复制代码 代码如下:
//描述:无间断滚动字幕
//版本:2.0
//作者:宝玉(WebUC.NET)
//最新更新:2004-10-26
//备:

<public:component>

<public:attachevent="oncontentready"onevent="f_Init()"/>
<public:attachevent="onpropertychange"onevent="f_PropChange()"/>
<public:propertyname="direction"/>
<public:propertyname="speed"/>
<public:propertyname="delay"/>

<public:methodNAME="marquee"/>
<public:methodNAME="stop"/>
<public:methodNAME="start"/>
</public:component>

<scriptlanguage="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
//-----------------------------------------------------------------------------
functionf_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();
}

functionInitMarquee()
{

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

}

functionFillMarquee()
{
varchildren=_oMarqueeContent.children;
vari=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));
}
}
}

functionmarquee()
{
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;
}
}

functionstop()
{
clearTimer();
_pause=true;
}

functionstart()
{
if(_timer!=null)
clearTimer();

_pause=false;

marquee();

}

functionclearTimer()
{
window.clearTimeout(_timer);
_timer=null;
}

//
//Cancelsanevent
//
functionf_CancelEvent()
{
event.returnValue=false;
}

//
//Apropertychanged
//
functionf_PropChange()
{
switch(event.propertyName)
{
default:
f_Redraw();
break;
}
}

//
//Forcesaredrawofthecontrol
//
functionf_Redraw()
{

}

</script>


HTML文件
复制代码 代码如下:
<style>
body,td{
font-size:9pt;
}

.marquee{
overflow-y:hidden;word-break:break-all;padding:10px;
behavior:url('marquee.htc');
}
.marqueediv{
padding-bottom:10px;
}
</style>
无间断滚动<br/>
每个标题间有停留<br/>
鼠标移入停止，鼠标移出继续滚动<br/>

<spanstyle="height:100px;width:200px;border:1pxsolidblack;"delay="3000"class="marquee"onmouseover="this.stop()"onmouseout="this.start()">
<div><ahref="http://www.webuc.net"target="_blank">1.宝玉(http://www.webuc.net)作品</a></div>
<div><ahref="http://www.webuc.net"target="_blank">2.强强联手，助推上海建筑领域信息化建设</a></div>
<div><ahref="http://www.webuc.net"target="_blank">3.广联达清单招标投标策略研讨会——河南站圆满成功</a></div>
<div><ahref="http://www.webuc.net"target="_blank">4.足球友谊赛：河北电建一公司VS广联达石家庄分公司</a></div>
<div><ahref="http://www.webuc.net"target="_blank">5.广联达——清单算量软件GCL7.0新版出炉！</a></div>
<div><ahref="http://www.webuc.net"target="_blank">6.喜报：广联达公司顺利通过ISO9000质量管理体系三年复审</a></div>
<div><ahref="http://www.webuc.net"target="_blank">7.广联达-清单整体解决方案在北京求实造价咨询公司的成功应用</a></div>
<div><ahref="http://www.webuc.net"target="_blank">8.广联达－施工项目成本管理系统（GCM）在荣尊堡工程中的应用</a></div>
<div><ahref="http://www.webuc.net"target="_blank">9.广联达-工程概预算软件在北京建工集团总公司东方广场工程的应用</a></div>
<div><ahref="http://www.webuc.net"target="_blank">10.asdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</a></div>
</span>
<script>

</script>