js实现单行文本向上滚动效果实例代码_Javascript教程-查字典教程网
js实现单行文本向上滚动效果实例代码
js实现单行文本向上滚动效果实例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:/***************滚动场次开始*****************/functionScrollText(co...

复制代码 代码如下:

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

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"; //默认设置为文字向上滚动

}

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类