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


Posted in Javascript onJanuary 25, 2017

本文实例讲述了基于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 相关文章推荐
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
JS实现留言板功能
Jun 17 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
angular和BootStrap3实现购物车功能
Jan 25 #Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 #Javascript
谈谈JavaScript数组常用方法总结
Jan 24 #Javascript
js实现日历的简单算法
Jan 24 #Javascript
JSON键值对序列化和反序列化解析
Jan 24 #Javascript
js自制图片放大镜功能
Jan 24 #Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 #Javascript
You might like
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
php格式化金额函数分享
2015/02/02 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
php实现socket推送技术的示例
2017/12/20 PHP
js 判断脚本加载完毕的代码
2011/07/13 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
Flask框架各种常见装饰器示例
2018/07/17 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
乡镇个人对照检查材料
2014/08/22 职场文书
简历自我评价模板
2015/03/11 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS