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

136 阅读 0 评论 90 点赞

我是靠谱客的博主瘦瘦蜜粉，最近开发中收集的这篇文章主要介绍兼容多浏览器的字幕特效Marquee的通用js类，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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 <= 0)
     $(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 <= 0)
     $(demo).scrollLeft -= $(demo1).offsetWidth;
    else
     $(demo).scrollLeft += amount;
    break;
   case "right":
    if($(demo).scrollLeft <= 0)
     $(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 < arguments.length; i++)
      this[startLength + i] = arguments[i];
     return this.length;
  }
}

$ = function ()
{
  var elements = new Array();

  for (var i = 0; i < arguments.length; 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< arguments.length; i++)
  {
   elements.push(document.getElementById(arguments[i]).value);
  }
  return elements;
}
}

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

(1)先添加css样式,如果你不想滚动字幕里的内容被无故撑大的话(有时候)
<style>
.wrap{word-break:break-all;overflow:hidden}
</style>

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

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

<div id="d1" style="overflow:hidden;height:200px;width:90px">
   <div id="d11" width="100%" class="wrap">
    =顶部=<br>动感地带资费攻略1 动感地带资费攻略2<br>=底部=
   </div>
   <div id="d12" width="100%" class="wrap"></div>
  </div>
  <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. 向左或向右滚动

<div id="d2" style="overflow:hidden;width:500">
  <table>
   <tr>
    <td id="d21">
     <nobr>
      [开始]动感地带资费攻略1 动感地带资费攻略2 动感地带资费攻略3 动感地带资费攻略4 动感地带资费攻略5 动感地带资费攻略6 动感地带资费攻略7 动感地带资费攻略8 动感地带资费攻略9 动感地带资费攻略10 动感地带资费攻略11 动感地带资费攻略12 动感地带资费攻略13 动感地带资费攻略14 动感地带资费攻略15 动感地带资费攻略16 动感地带资费攻略17 动感地带资费攻略18 动感地带资费攻略19 动感地带资费攻略20[结束]　
     </nobr>
    </td>
    <td id="d22"></td>
   </tr>
  </table>
</div>
<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");