Example of horse racing effect based on Marquee. js plug in
- 2021-07-15 03:38:38
- OfStack
This article describes the example of the Marquee. js plug-in implementation of the lantern effect. Share it for your reference, as follows:
1. Marquee. js file
/****************************************************************
- Marquee.js
- Parameters:
- ID Scroll Object (Required)
- Direction Scroll direction ( "top": 0, "up": 0, "bottom": 1, "down": 1, "left": 2, "right": 3 )
- Step : Pace
- Width Width
- Height Height
- Timer Affect the rolling speed of the pace
- DelayTime Delay time
- WaitTime Wait time at initialization
- ScrollStep Page roll step
*****************************************************************/
function Marquee(obt) {
if (obt == null || obt == "") {
return;
}
this.ID = document.getElementById(obt.ID);
if (!this.ID) {
alert(" Initialization error \r\n Please check the label id Is the setting correct !");
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. Script call
window.onload = function() {
new Marquee({ ID: "scrollNews", Direction: "top", Step: 2, Width: 0, Height: 80, Timer: 50, DelayTime: 1000, WaitTime: 1000, ScrollStep: 80 });
}
For more readers interested in JavaScript related content, please check the topics of this site: "Summary of JavaScript Switching Effects and Skills", "Summary of JavaScript Animation Effects and Skills", "Summary of JavaScript Error and Debugging Skills", "Summary of JavaScript Data Structure and Algorithm Skills" and "Summary of JavaScript Mathematical Operation Usage"
I hope this article is helpful to everyone's JavaScript programming.