基于Marquee.js插件实现的跑马灯效果示例

本文实例讲述了基于marquee.js插件实现的跑马灯效果。分享给大家供大家参考，具体如下：

1、marquee.js文件

/****************************************************************
- marquee.js
- 参数：
- id：滚动对象（必须）
- direction：滚动方向（"top": 0, "up": 0, "bottom": 1, "down": 1, "left": 2, "right": 3）
- step：步伐
- width：宽度
- height：高度
- timer：影响步伐滚动速度
- delaytime：延时时间
- waittime：初始化时的等待时间
- scrollstep：卷页步伐
*****************************************************************/
function marquee(obt) {
  if (obt == null || obt == "") {
    return;
  }
  this.id = document.getelementbyid(obt.id);
  if (!this.id) {
    alert("初始化错误\r\n请检查标签id设置是否正确!");
    this.id = -1;
    return;
  }
  this.direction = this.width = this.height = this.delaytime = this.waittime = this.ctl = this.startid = this.stop = this.mouseover = 0;
  this.step = 1;
  this.timer = 30;
  this.directionarray = { "top": 0, "up": 0, "bottom": 1, "down": 1, "left": 2, "right": 3 };
  if (typeof obt.direction == "number" && obt.direction) this.direction = obt.direction;
  if (typeof obt.direction == "string" && obt.direction) this.direction = this.directionarray[obt.direction.tostring().tolowercase()];
  if (typeof obt.step == "number" && obt.step) this.step = obt.step;
  if (typeof obt.width == "number" && obt.width) this.width = obt.width;
  if (typeof obt.height == "number" && obt.height) this.height = obt.height;
  if (typeof obt.timer == "number" && obt.timer) this.timer = obt.timer;
  if (typeof obt.delaytime == "number" && obt.delaytime) this.delaytime = obt.delaytime;
  if (typeof obt.waittime == "number" && obt.waittime) this.waittime = obt.waittime;
  if (typeof obt.scrollstep == "number" && obt.scrollstep) this.scrollstep = obt.scrollstep;
  this.id.style.overflow = this.id.style.overflowx = this.id.style.overflowy = "hidden";
  this.id.nowrap = true;
  this.isnotopera = (navigator.useragent.tolowercase().indexof("opera") == -1);
  this.start();
}
marquee.prototype.start = function() {
  if (this.id == -1) return;
  if (this.width == 0) this.width = parseint(this.id.style.width);
  if (this.height == 0) this.height = parseint(this.id.style.height);
  if (this.timer < 20) this.timer = 20;
  if (this.waittime < 800) this.waittime = 800;
  this.halfwidth = math.round(this.width / 2);
  this.halfheight = math.round(this.height / 2);
  this.bakstep = this.step;
  this.id.style.width = this.width + "px";
  this.id.style.height = this.height + "px";
  if (typeof this.scrollstep != "number") this.scrollstep = this.direction > 1 ? this.width : this.height;
  var templateleft = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;display:inline;'><tr><td nowrap=true style='white-space: nowrap;word-break:keep-all;'>msclass_temp_html</td><td nowrap=true style='white-space: nowrap;word-break:keep-all;'>msclass_temp_html</td></tr></table>";
  var templatetop = "<table cellspacing='0' cellpadding='0' style='border-collapse:collapse;'><tr><td>msclass_temp_html</td></tr><tr><td>msclass_temp_html</td></tr></table>";
  var msobj = this;
  msobj.temphtml = msobj.id.innerhtml;
  if (msobj.direction <= 1) {
    msobj.id.innerhtml = templatetop.replace(/msclass_temp_html/g, msobj.id.innerhtml);
  }
  else {
    if (msobj.scrollstep == 0 && msobj.delaytime == 0) {
      msobj.id.innerhtml += msobj.id.innerhtml;
    }
    else {
      msobj.id.innerhtml = templateleft.replace(/msclass_temp_html/g, msobj.id.innerhtml);
    }
  }
  var timer = this.timer;
  var delaytime = this.delaytime;
  var waittime = this.waittime;
  msobj.startid = function() { msobj.scroll() }
  msobj.continue = function() {
    if (msobj.mouseover == 1) {
      settimeout(msobj.continue, delaytime);
    }
    else {
      clearinterval(msobj.timerid);
      msobj.ctl = msobj.stop = 0;
      msobj.timerid = setinterval(msobj.startid, timer);
    }
  }
  msobj.pause = function() {
    msobj.stop = 1;
    clearinterval(msobj.timerid);
    settimeout(msobj.continue, delaytime);
  }
  msobj.begin = function() {
    msobj.clientscroll = msobj.direction > 1 ? msobj.id.scrollwidth / 2 : msobj.id.scrollheight / 2;
    if ((msobj.direction <= 1 && msobj.clientscroll <= msobj.height + msobj.step) || (msobj.direction > 1 && msobj.clientscroll <= msobj.width + msobj.step)) {
      msobj.id.innerhtml = msobj.temphtml;
      delete (msobj.temphtml);
      return;
    }
    delete (msobj.temphtml);
    msobj.timerid = setinterval(msobj.startid, timer);
    if (msobj.scrollstep < 0) return;
    msobj.id.onmousemove = function(event) {
      if (msobj.scrollstep == 0 && msobj.direction > 1) {
        var event = event || window.event;
        if (window.event) {
          if (msobj.isnotopera) {
            msobj.eventleft = event.srcelement.id == msobj.id.id ? event.offsetx - msobj.id.scrollleft : event.srcelement.offsetleft - msobj.id.scrollleft + event.offsetx;
          }
          else {
            msobj.scrollstep = null;
            return;
          }
        }
        else {
          msobj.eventleft = event.layerx - msobj.id.scrollleft;
        }
        msobj.direction = msobj.eventleft > msobj.halfwidth ? 3 : 2;
        msobj.abscenter = math.abs(msobj.halfwidth - msobj.eventleft);
        msobj.step = math.round(msobj.abscenter * (msobj.bakstep * 2) / msobj.halfwidth);
      }
    }
    msobj.id.onmouseover = function() {
      if (msobj.scrollstep == 0) return;
      msobj.mouseover = 1;
      clearinterval(msobj.timerid);
    }
    msobj.id.onmouseout = function() {
      if (msobj.scrollstep == 0) {
        if (msobj.step == 0) msobj.step = 1;
        return;
      }
      msobj.mouseover = 0;
      if (msobj.stop == 0) {
        clearinterval(msobj.timerid);
        msobj.timerid = setinterval(msobj.startid, timer);
      }
    }
  }
  settimeout(msobj.begin, waittime);
}
marquee.prototype.scroll = function() {
  switch (this.direction) {
    case 0:
      this.ctl += this.step;
      if (this.ctl >= this.scrollstep && this.delaytime > 0) {
        this.id.scrolltop += this.scrollstep + this.step - this.ctl;
        this.pause();
        return;
      }
      else {
        if (this.id.scrolltop >= this.clientscroll) {
          this.id.scrolltop -= this.clientscroll;
        }
        this.id.scrolltop += this.step;
      }
      break;
    case 1:
      this.ctl += this.step;
      if (this.ctl >= this.scrollstep && this.delaytime > 0) {
        this.id.scrolltop -= this.scrollstep + this.step - this.ctl;
        this.pause();
        return;
      }
      else {
        if (this.id.scrolltop <= 0) {
          this.id.scrolltop += this.clientscroll;
        }
        this.id.scrolltop -= this.step;
      }
      break;
    case 2:
      this.ctl += this.step;
      if (this.ctl >= this.scrollstep && this.delaytime > 0) {
        this.id.scrollleft += this.scrollstep + this.step - this.ctl;
        this.pause();
        return;
      }
      else {
        if (this.id.scrollleft >= this.clientscroll) {
          this.id.scrollleft -= this.clientscroll;
        }
        this.id.scrollleft += this.step;
      }
      break;
    case 3:
      this.ctl += this.step;
      if (this.ctl >= this.scrollstep && this.delaytime > 0) {
        this.id.scrollleft -= this.scrollstep + this.step - this.ctl;
        this.pause();
        return;
      }
      else {
        if (this.id.scrollleft <= 0) {
          this.id.scrollleft += this.clientscroll;
        }
        this.id.scrollleft -= this.step;
      }
      break;
  }
}

2、脚本调用

window.onload = function() {
  new marquee({ id: "scrollnews", direction: "top", step: 2, width: 0, height: 80, timer: 50, delaytime: 1000, waittime: 1000, scrollstep: 80 });
}

更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript切换特效与技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》

希望本文所述对大家javascript程序设计有所帮助。