无间断滚动效果 htc

marquee.htc

复制代码 代码如下:

//  描述        : 无间断滚动字幕
//  版本        : 2.0
//  作者        : 宝玉(WebUC.NET)
//  最新更新    : 2004-10-26
//  备            :
















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()
{

}

HTML文件

复制代码 代码如下:

无间断滚动
每个标题间有停留
鼠标移入停止，鼠标移出继续滚动


        

1. 宝玉(http://www.webuc.net)作品

        

2. 强强联手，助推上海建筑领域信息化建设 

        

3. 广联达清单招标投标策略研讨会――河南站圆满成功 

        

4. 足球友谊赛：河北电建一公司 VS 广联达石家庄分公司  

        

5. 广联达――清单算量软件 GCL7.0新版出炉！ 

        

6. 喜报：广联达公司顺利通过ISO9000质量管理体系三年复审 

        

7. 广联达-清单整体解决方案在北京求实造价咨询公司的成功应用 

        

8. 广联达－施工项目成本管理系统（GCM）在荣尊堡工程中的应用 

        

9. 广联达-工程概预算软件在北京建工集团总公司东方广场工程的应用 

        

10. asdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff