Home > Article > Web Front-end > Marquee's universal js class for subtitle effects compatible with multiple browsers_link effects
Marquee.js
Parameter description:
demo The ID of the subtitle area tag (div);
demo1/demo2 The ID of the display content tag (div or td) demo1 is the original content, demo2 is its Copy;
direction subtitle direction (up, down, left, right);
delay delay time of subtitle playback (milliseconds);
step step size of subtitle playback (i.e. pix, the smaller the step size, such as step=1, the scrolling is smoother)
function Marquee (demo, demo1, demo2, direction, delay, step)
{
direction = direction.toLowerCase();
if(((direction == "up" || direction == "down") && ($(demo1).offsetHeight > $(demo).offsetHeight)) || ((direction == " left" || direction == "right") && ($(demo1).offsetWidth > $(demo).offsetWidth)))
{
$(demo2).innerHTML = $(demo1).innerHTML;
if(direction == "down")
$(demo).scrollTop = 2 * $(demo1).offsetHeight - $(demo).offsetHeight;
if(direction == "right")
$(demo).scrollLeft = 2 * $(demo1).offsetWidth - $(demo).offsetWidth;
}
else
return;
var flag = true;
var speed = delay == null? 1 : parseInt(delay);
var amount = step == null? 1 : parseInt(step);
var Marquee = function ()
{
switch(direction)
{
case "up":
if($(demo2).offsetTop - $(demo).scrollTop $(demo) .scrollTop -= $(demo1).offsetHeight;
else
$(demo).scrollTop = amount;
break;
case "down":
if($(demo1). offsetTop - $(demo).scrollTop >= 0)
$(demo).scrollTop = $(demo2).offsetHeight;
else
$(demo).scrollTop -= amount;
break ;
case "left":
if($(demo2).offsetWidth - $(demo).scrollLeft $(demo).scrollLeft -= $(demo1).offsetWidth;
else
$(demo).scrollLeft = amount;
break;
case "right":
if($(demo).scrollLeft $(demo) .scrollLeft = $(demo2).offsetWidth;
else
$(demo).scrollLeft -= amount;
break;
default:break;
}
}
var timer = setInterval(Marquee,speed);
var play = function ()
{
if(flag)
{
clearInterval(timer);
timer = setInterval(Marquee, speed);
}
}
$(demo).onmouseover = function ()
{
if(flag)
clearInterval( timer);
}
$(demo).onmouseout = function ()
{
if(flag)
timer = setInterval(Marquee, speed);
}
this.delay = function (s)
{
speed = s == null? 50 : parseInt(s);
play();
}
this.step = function (s)
{
amount = s == null? 1 : parseInt(s);
play();
}
this. start = function ()
{
if(!flag)
{
flag = true;
play();
}
}
this .stop = function ()
{
if(flag)
{
flag = false;
clearInterval(timer);
}
}
this.direction = function (s)
{
s = s.toLowerCase();
if( s == direction )
return;
if(s == "down" && direction == "up" )
direction = s;
if(s == "up" && direction == "down")
direction = s;
if (s == "right" && direction == "left")
direction = s;
if(s == "left" && direction == "right")
direction = s;
if (s == direction)
play();
}
}
The $ or $F used in the above js, if you have used prototype.js, put Just add it; otherwise you need to reference the following js file first: Ruby.js (cut from prototype.js haha)
function Ruby ()
{
}
if (!Array.prototype.push) {
Array.prototype.push = function() {
var startLength = this.length;
for (var i = 0; i this[startLength i] = arguments[i];
return this.length;
}
}
$ = function ()
{
var elements = new Array();
for (var i = 0; i var element = arguments[i];
if (typeof element == ''string'')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
$F = function ()
{
if(arguments .length == 1)
return document.getElementById(arguments[0]).value;
else
{
var elements = new Array();
for(var i = 0 ;i {
elements.push(document.getElementById(arguments[i]).value);
}
return elements;
}
}
At this point, the js file has been completed, let’s start writing the HTML code:
(1) Add the css style first, if you don’t want the content in the scrolling subtitles to be expanded for no reason (yes time)
.wrap{word-break:break-all;overflow:hidden}
(2) Add js file --> Used prototype.js is better, replace Ruby.js :)
(3) Add subtitle area content
[开始]动感地带资费攻略1 动感地带资费攻略2 动感地带资费攻略3 动感地带资费攻略4 动感地带资费攻略5 动感地带资费攻略6 动感地带资费攻略7 动感地带资费攻略8 动感地带资费攻略9 动感地带资费攻略10 动感地带资费攻略11 动感地带资费攻略12 动感地带资费攻略13 动感地带资费攻略14 动感地带资费攻略15 动感地带资费攻略16 动感地带资费攻略17 动感地带资费攻略18 动感地带资费攻略19 动感地带资费攻略20[结束] |