本文实例讲述了基于Marquee.js插件实现的跑马灯效果。分享给大家供大家参考,具体如下:
1、Marquee.js文件
rush: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,"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 = "