Heim > Web-Frontend > js-Tutorial > Hauptteil

兼容多浏览器的字幕特效Marquee的通用js类_链接特效

WBOY
Freigeben: 2016-05-16 19:02:25
Original
822 Leute haben es durchsucht

Marquee.js

参数说明:  
demo  字幕区域标签(div)的ID; 
demo1/demo2  显示内容标签(div或td)的ID   demo1为原始内容,demo2是它的拷贝;  
direction 字幕方向(up,down,left,right) ; 
delay 字幕播放的延迟时间(毫秒); 
step 字幕播放的步长(即pix,步长越小,如step=1,滚动越平滑)



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();
 }
}

 上面js里用到的$或$F,如果你用过prototype.js的话,把它添加进去就行了; 否则你需要先引用下面的js文件: Ruby.js  (从prototype.js里截过来的 呵呵)



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;
 }
}

 到这里,js文件已经搞定了,开始写HTML代码:

(1)先添加css样式,如果你不想滚动字幕里的内容被无故撑大的话(有时候)


(2)添加js文件  -->用了prototype.js的更好,替换掉Ruby.js   :)
<script></script>
<script></script>

(3)添加字幕区域内容
1. 向上或向下滚动    


   

    =顶部=
动感地带资费攻略1 动感地带资费攻略2
=底部=
   

   

  

  <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");

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage