[轉]字幕特效Marquee的通用js类(兼容多浏览器)

轉自: http://www.sifung.com/pages/693.shtm

主要是因为IE里的Marquee不具有通用性,在其它浏览器下无法正常工作,故用JavaScript把它的功能重写了一下,支持多浏览器! 其功能已封装到Marquee.js中,支持无间断滚动(默认),如果字幕区域里的内容 长/宽 度 小于字幕区域设置的 长/宽 度 ,则默认不滚动! 支持动态更新滚动速度和方向!

Marquee.js

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

/* **********************************************************************************************
obj__字幕區域標籤(div)的ID; 
obj1__/obj2__顯示內容標籤(div或td)的ID obj1__為原始內容,obj2__是它的拷貝; 
direction__字幕方向(up,down,left,right) ; 
delay__字幕播放的延遲時間(毫秒); 
step__字幕播放的步長(即pix,步長越小,如step__=1,滾動越平滑) 
************************************************************************************************* */
function  Marquee(obj__, obj1__, obj2__, direction__, delay__, step__) {
    direction__  =  direction__.toLowerCase();

     if  (((direction__  ==   " up "   ||  direction__  ==   " down " )  &&  ($(obj1__).offsetHeight  >  $(obj__).offsetHeight))  ||  ((direction__  ==   " left "   ||  direction__  ==   " right " )  &&  ($(obj1__).offsetWidth  >  $(obj__).offsetWidth))) {
        $(obj2__).innerHTML  =  $(obj1__).innerHTML;
         if  (direction__  ==   " down " )
            $(obj__).scrollTop  =   2   *  $(obj1__).offsetHeight  -  $(obj__).offsetHeight;
         if  (direction__  ==   " right " )
            $(obj__).scrollLeft  =   2   *  $(obj1__).offsetWidth  -  $(obj__).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  ($(obj2__).offsetTop  -  $(obj__).scrollTop  <=   0 )
                    $(obj__).scrollTop  -=  $(obj1__).offsetHeight;
                 else
                    $(obj__).scrollTop  +=  amount;
                 break ;
             case   " down " :
                 if  ($(obj1__).offsetTop  -  $(obj__).scrollTop  >=   0 )
                    $(obj__).scrollTop  +=  $(obj2__).offsetHeight;
                 else
                    $(obj__).scrollTop  -=  amount;
                 break ;
             case   " left " :
                 if  ($(obj2__).offsetWidth  -  $(obj__).scrollLeft  <=   0 )
                    $(obj__).scrollLeft  -=  $(obj1__).offsetWidth;
                 else
                    $(obj__).scrollLeft  +=  amount;
                 break ;
             case   " right " :
                 if  ($(obj__).scrollLeft  <=   0 )
                    $(obj__).scrollLeft  +=  $(obj2__).offsetWidth;
                 else
                    $(obj__).scrollLeft  -=  amount;
                 break ;
             default :  break ;
        }
    }

     var  timer  =  setInterval(Marquee, speed);

     var  play  =   function () {
         if  (flag) {
            clearInterval(timer);
            timer  =  setInterval(Marquee, speed);
        }
    }

    $(obj__).onmouseover  =   function () {
         if  (flag)
            clearInterval(timer);
    }

    $(obj__).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");