[轉]字幕特效Marquee的通用js類(相容多浏覽器)

主要是因為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;

                    $(obj__).scrollTop -= amount;

            case "left":

                if ($(obj2__).offsetWidth - $(obj__).scrollLeft <= 0)

                    $(obj__).scrollLeft -= $(obj1__).offsetWidth;

                    $(obj__).scrollLeft += amount;

            case "right":

                if ($(obj__).scrollLeft <= 0)

                    $(obj__).scrollLeft += $(obj2__).offsetWidth;

                    $(obj__).scrollLeft -= amount;

            default: break;

        }

    var timer = setInterval(Marquee, speed);

    var play = function() {

        if (flag) {

            clearInterval(timer);

            timer = setInterval(Marquee, speed);

    $(obj__).onmouseover = function() {

        if (flag)

    $(obj__).onmouseout = function() {

    this.delay__ = function(s) {

        speed = s == null ? 50 : parseInt(s);

        play();

    this.step__ = function(s) {

        amount = s == null ? 1 : parseInt(s);

    this.start = function() {

        if (!flag) {

            flag = true;

            play();

    this.stop = function() {

            flag = false;

    this.direction__ = function(s) {

        s = s.toLowerCase();

        if (s == direction__)

            return;

        if (s == "down" && direction__ == "up")

            direction__ = s;

        if (s == "up" && direction__ == "down")

        if (s == "right" && direction__ == "left")

        if (s == "left" && direction__ == "right")

} 

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