js 实现单行文本滚动效果

js 代码如下：

/***************滚动场次开始*****************/



function ScrollText(content, btnPrevious, btnNext, autoStart) {

    this.Delay = 10;

    this.LineHeight = 20;

    this.Amount = 1; 

    this.Direction = "up";

    this.Timeout = 1500;

    this.ScrollContent = this.$(content);

    this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;

    //this.ScrollContent.scrollTop = 0;

    if (btnNext) {

        this.NextButton = this.$(btnNext);

        this.NextButton.onclick = this.GetFunction(this, "Next");

        this.NextButton.onmouseover = this.GetFunction(this, "Stop");

        this.NextButton.onmouseout = this.GetFunction(this, "Start");

    }

    if (btnPrevious) {

        this.PreviousButton = this.$(btnPrevious);

        this.PreviousButton.onclick = this.GetFunction(this, "Previous");

        this.PreviousButton.onmouseover = this.GetFunction(this, "Stop");

        this.PreviousButton.onmouseout = this.GetFunction(this, "Start");

    }

    this.ScrollContent.onmouseover = this.GetFunction(this, "Stop");

    this.ScrollContent.onmouseout = this.GetFunction(this, "Start");

    if (autoStart) {

        this.Start();

    }

}



ScrollText.prototype.$ = function (element) {

    return document.getElementById(element);

}



ScrollText.prototype.Previous = function () {

    clearTimeout(this.AutoScrollTimer);

    clearTimeout(this.ScrollTimer);

    this.Scroll("up");

}



ScrollText.prototype.Next = function () {

    clearTimeout(this.AutoScrollTimer);

    clearTimeout(this.ScrollTimer);

    this.Scroll("down");

}



ScrollText.prototype.Start = function () {

    clearTimeout(this.AutoScrollTimer);

    this.AutoScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Timeout);

}



ScrollText.prototype.Stop = function () {

    clearTimeout(this.ScrollTimer);

    clearTimeout(this.AutoScrollTimer);

}



ScrollText.prototype.AutoScroll = function () {

    if (this.Direction == "up") {

        if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {

            this.ScrollContent.scrollTop = 0;

        }

        this.ScrollContent.scrollTop += this.Amount;

    } else {

        if (parseInt(this.ScrollContent.scrollTop) <= 0) {

            this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;

        }

        this.ScrollContent.scrollTop -= this.Amount;

    }

    if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) {

        this.ScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Delay);

    } else {

        this.AutoScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Timeout);

    }

}



ScrollText.prototype.Scroll = function (direction) {

    if (direction == "up") {

        if (this.ScrollContent.scrollTop == 0) {

            this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;

        }

        this.ScrollContent.scrollTop -= this.Amount;

    } else {

        this.ScrollContent.scrollTop += this.Amount;

    }

    if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {

        this.ScrollContent.scrollTop = 0;

    }

    if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) {

        this.ScrollTimer = setTimeout(this.GetFunction(this, "Scroll", direction), this.Delay);

    }

}



ScrollText.prototype.GetFunction = function (variable, method, param) {

    return function () {

        variable[method](param);

    }

}



if (document.getElementById("ul_round")) {

    var scrollup = new ScrollText("ul_round");

    scrollup.LineHeight = 40;        //单排文字滚动的高度

    scrollup.Amount = 1;            //注意:子模块(LineHeight)一定要能整除Amount.

    scrollup.Delay = 30;           //延时

    scrollup.Start();             //文字自动滚动

    scrollup.Direction = "up";   //默认设置为文字向上滚动

}

/***************滚动场次结束*****************/

html代码：

<ul id="ul_round">

                    <li>今天上午场<b class="c_c00">10:00-11:00</b>,

                            已经结束

                    </li>

                    <li>今天下午场<b class="c_c00">14:30-15:30</b>,

                            已经结束

                    </li>

                    <li>今天临时场次<b class="c_c00">16:00-16:15</b>,

                            已经结束

                    </li>

        

                    <li>今天上午场<b class="c_c00">10:00-11:00</b>,

                            已经结束

                    </li>

                    <li>今天下午场<b class="c_c00">14:30-15:30</b>,

                            已经结束

                    </li>

                    <li>今天临时场次<b class="c_c00">16:00-16:15</b>,

                            已经结束

                    </li>

        </ul>