SoFunction
Updated on 2025-04-13

Uninterrupted scrolling effect htc


//  Description        : Uninterrupted scrolling of subtitles
//    Version        : 2.0
// Author: Baoyu()
//  Latest update    : 2004-10-26
//  Preparation                     :

<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;    // Scrolling interval
var _delayInterval = 2000;     // Title display delay interval

//+----------------------------------------------------------------------------
//  Function:       f_Init
//  Description:    Initialization
//    Parameters:        null
//  Returns:        null
//-----------------------------------------------------------------------------
function f_Init()
{

    _oMarquee = ("div");
    _oMarqueeContent = ("span");
    _oMarqueeContent.innerHTML = ;
    _oMarquee.appendChild(_oMarqueeContent);
     = "";
    (_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 = ();
    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.;

    _ContentWidth = _oMarqueeContent.offsetWidth;
    _ContentHeight = _oMarqueeContent.offsetHeight;    

    _paddingTop = _oMarquee.offsetTop;

    FillMarquee()

    _oMarqueeContent. = "relative";
    _oMarqueeContent. = 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. -= speed;
            if((_oMarqueeContent. + _ContentHeight + _paddingTop) < speed)
                _oMarqueeContent. = 0;

            
            if ((_oMarqueeContent.children[_firstNode].offsetTop) - _paddingTop < speed)
            {
                _firstNode++;
                if (_firstNode >= _count)
                    _firstNode = 0;

                _timer = (uniqueID + ".marquee()", _delayInterval);
            }
            else
                _timer = (uniqueID + ".marquee()", _marqueeInterval);
            break;
    }
}

function stop()
{
    clearTimer();
    _pause = true;
}

function start()
{
    if (_timer != null)
        clearTimer();

    _pause = false;

    marquee();

}

function clearTimer()
{
    (_timer);
    _timer = null;
}

//
// Cancels an event
//
function f_CancelEvent()
{
     = false;
}

//
// A property changed
//
function f_PropChange()
{
    switch ()
    {
        default:
            f_Redraw();
            break;
    }
}

//
// Forces a redraw of the control
//
function f_Redraw()
{

}

</script>