Posted in Javascript onNovember 28, 2013
/***************滚动场次开始*****************/ 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"; //默认设置为文字向上滚动 } /***************滚动场次结束*****************/
js实现单行文本向上滚动效果实例代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@