无间断滚动效果 htc
程序员文章站
2022-06-19 16:15:02
marquee.htc复制代码 代码如下:// 描述 :...
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="http://www.webuc.net" target="_blank">1. 宝玉(http://www.webuc.net)作品</a></div>
<div><a href="http://www.webuc.net" target="_blank">2. 强强联手,助推上海建筑领域信息化建设</a> </div>
<div><a href="http://www.webuc.net" target="_blank">3. 广联达清单招标投标策略研讨会——河南站圆满成功</a> </div>
<div><a href="http://www.webuc.net" target="_blank">4. 足球友谊赛:河北电建一公司 vs 广联达石家庄分公司</a> </div>
<div><a href="http://www.webuc.net" target="_blank">5. 广联达——清单算量软件 gcl7.0新版出炉!</a> </div>
<div><a href="http://www.webuc.net" target="_blank">6. 喜报:广联达公司顺利通过iso9000质量管理体系三年复审</a> </div>
<div><a href="http://www.webuc.net" target="_blank">7. 广联达-清单整体解决方案在北京求实造价咨询公司的成功应用</a> </div>
<div><a href="http://www.webuc.net" target="_blank">8. 广联达-施工项目成本管理系统(gcm)在荣尊堡工程中的应用</a> </div>
<div><a href="http://www.webuc.net" target="_blank">9. 广联达-工程概预算软件在北京建工集团总公司东方广场工程的应用</a> </div>
<div><a href="http://www.webuc.net" target="_blank">10. asdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</a> </div>
</span>
<script>
</script>
复制代码 代码如下:
// 描述 : 无间断滚动字幕
// 版本 : 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="http://www.webuc.net" target="_blank">1. 宝玉(http://www.webuc.net)作品</a></div>
<div><a href="http://www.webuc.net" target="_blank">2. 强强联手,助推上海建筑领域信息化建设</a> </div>
<div><a href="http://www.webuc.net" target="_blank">3. 广联达清单招标投标策略研讨会——河南站圆满成功</a> </div>
<div><a href="http://www.webuc.net" target="_blank">4. 足球友谊赛:河北电建一公司 vs 广联达石家庄分公司</a> </div>
<div><a href="http://www.webuc.net" target="_blank">5. 广联达——清单算量软件 gcl7.0新版出炉!</a> </div>
<div><a href="http://www.webuc.net" target="_blank">6. 喜报:广联达公司顺利通过iso9000质量管理体系三年复审</a> </div>
<div><a href="http://www.webuc.net" target="_blank">7. 广联达-清单整体解决方案在北京求实造价咨询公司的成功应用</a> </div>
<div><a href="http://www.webuc.net" target="_blank">8. 广联达-施工项目成本管理系统(gcm)在荣尊堡工程中的应用</a> </div>
<div><a href="http://www.webuc.net" target="_blank">9. 广联达-工程概预算软件在北京建工集团总公司东方广场工程的应用</a> </div>
<div><a href="http://www.webuc.net" target="_blank">10. asdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</a> </div>
</span>
<script>
</script>
上一篇: 网页|实现酷炫3D相册
下一篇: wps条件格式