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

  }

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