Home  >  Article  >  Web Front-end  >  Marquee's universal js class for subtitle effects compatible with multiple browsers_link effects

Marquee's universal js class for subtitle effects compatible with multiple browsers_link effects

WBOY
WBOYOriginal
2016-05-16 19:02:25806browse

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. Scroll up or down




=Top=
M-Zone Tariff Guide 1 M-Zone Tariff Guide 2
=Bottom=

<script></script> <script></script> <script>var obj1 = new Marquee("d1","d11","d12","up");</script>
  <script>var obj1 = new Marquee("d1","d11","d12","up");</script>
由于字幕d1的height=200,而d11的内容高度不足200,故字幕默认不会滚动,要实现滚动的话,只需d11的height>200就行了,故只需在d11的里面再放个空div就行了,让它的height=200; 如果d11的内容高度大于了200px,则字幕区域d1将无间断滚动

2. 向左或向右滚动



  
   
    
    
   
  

     
      [开始]动感地带资费攻略1 动感地带资费攻略2 动感地带资费攻略3 动感地带资费攻略4 动感地带资费攻略5 动感地带资费攻略6 动感地带资费攻略7 动感地带资费攻略8 动感地带资费攻略9 动感地带资费攻略10 动感地带资费攻略11 动感地带资费攻略12 动感地带资费攻略13 动感地带资费攻略14 动感地带资费攻略15 动感地带资费攻略16 动感地带资费攻略17 动感地带资费攻略18 动感地带资费攻略19 动感地带资费攻略20[结束] 
     

    

 

 <script>var obj2 = new Marquee("d2","d21","d22","left");</script>

实现原理同上,至于为什么这里要用table而不用div,是因为div在默认情况只能判断height,而不能判断width,而table却恰恰相反,上面用到的nobr标签也是必需的,防止字幕自动换行!

附:  更改延迟播放速度 obj2.delay(50); 或 obj2.delay("50");
  更改播放步长  obj2.step(50); 或 obj2.step("50");
  停止播放 obj2.stop();  继续播放 obj2.start();
  更改播放方向(同类型方向)  obj2.direction("right");

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn