JavaScript实现单行文本向上滚动效果的完整代码示例

/***************滚动场次开始*****************/
function ScrollText(content, btnPrevious, btnNext, autoStart) {\n this.Delay = 10;\n this.LineHeight = 20;\n this.Amount = 1; \n this.Direction = "up";\n this.Timeout = 1500;\n this.ScrollContent = this.$(content);\n this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;\n //this.ScrollContent.scrollTop = 0;\n if (btnNext) {\n this.NextButton = this.$(btnNext);\n this.NextButton.onclick = this.GetFunction(this, "Next");\n this.NextButton.onmouseover = this.GetFunction(this, "Stop");\n this.NextButton.onmouseout = this.GetFunction(this, "Start");\n }\n if (btnPrevious) {\n this.PreviousButton = this.$(btnPrevious);\n this.PreviousButton.onclick = this.GetFunction(this, "Previous");\n this.PreviousButton.onmouseover = this.GetFunction(this, "Stop");\n this.PreviousButton.onmouseout = this.GetFunction(this, "Start");\n }\n this.ScrollContent.onmouseover = this.GetFunction(this, "Stop");\n this.ScrollContent.onmouseout = this.GetFunction(this, "Start");\n if (autoStart) {\n this.Start();\n }\n}
ScrollText.prototype.$ = function (element) {\n return document.getElementById(element);\n}
ScrollText.prototype.Previous = function () {\n clearTimeout(this.AutoScrollTimer);\n clearTimeout(this.ScrollTimer);\n this.Scroll("up");\n}
ScrollText.prototype.Next = function () {\n clearTimeout(this.AutoScrollTimer);\n clearTimeout(this.ScrollTimer);\n this.Scroll("down");\n}
ScrollText.prototype.Start = function () {\n clearTimeout(this.AutoScrollTimer);\n this.AutoScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Timeout);\n}
ScrollText.prototype.Stop = function () {\n clearTimeout(this.ScrollTimer);\n clearTimeout(this.AutoScrollTimer);\n}
ScrollText.prototype.AutoScroll = function () {\n if (this.Direction == "up") {\n if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {\n this.ScrollContent.scrollTop = 0;\n }\n this.ScrollContent.scrollTop += this.Amount;\n } else {\n if (parseInt(this.ScrollContent.scrollTop) <= 0) {\n this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;\n }\n this.ScrollContent.scrollTop -= this.Amount;\n }\n if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) {\n this.ScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Delay);\n } else {\n this.AutoScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Timeout);\n }\n}
ScrollText.prototype.Scroll = function (direction) {\n if (direction == "up") {\n if (this.ScrollContent.scrollTop == 0) {\n this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;\n }\n this.ScrollContent.scrollTop -= this.Amount;\n } else {\n this.ScrollContent.scrollTop += this.Amount;\n }\n if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {\n this.ScrollContent.scrollTop = 0;\n }\n if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) {\n this.ScrollTimer = setTimeout(this.GetFunction(this, "Scroll", direction), this.Delay);\n }\n}
ScrollText.prototype.GetFunction = function (variable, method, param) {\n return function () {\n variable[method](param);\n }\n}
if (document.getElementById("ul_round")) {\n var scrollup = new ScrollText("ul_round");\n scrollup.LineHeight = 40; //单排文字滚动的高度\n scrollup.Amount = 1; //注意:子模块(LineHeight)一定要能整除Amount.\n scrollup.Delay = 30; //延时\n scrollup.Start(); //文字自动滚动\n scrollup.Direction = "up"; //默认设置为文字向上滚动\n}\n/***************滚动场次结束*****************/