JavaScript_翻轉器

weixin_34162629發表於2011-10-04
JavaScript

現在隨便那個 JavaScript 框架實現像翻轉器這樣的功能都再容易不過，它們的基礎都是 JavaScript，但框架只會讓你變得 stupid。知其然，而不知道其所以然。要是用 jQuery 實現一個兩狀態翻轉，幾行就行了。

$(document).ready(function() {
    $('img').each(function() {
        $(this).mouseout(function() {
            $(this).attr('src', 'images/' + $(this).attr('id') + '_off.gif');
        });
        $(this).mouseover(function() {
            $(this).attr('src', 'images/' + $(this).attr('id') + '_on.gif');
        });
    });
});

但僅僅會用框架不利於一個程式設計師的成長。花點時間，把基礎打好。

下面用 JavaScript 實現的與用 jQuery 相比，你看到了：

  • 如何向一個已有的物件新增新的物件和屬性，如 outImage、overImage。
  • 如何建立一個標記，如 new Image()。
  • 如何預載入頁面的資源。
  • 如何向一個物件新增事件，以匿名函式方式新增事件。

 

本文內容

  • 兩狀態翻轉器
  • 三狀態翻轉器
  • 連結觸發翻轉器

 

兩狀態翻轉器

滑鼠停留或離開時顯示的影像不同，產生動畫效果。頁面 HTML 標記如下：

<a href="next1.html">
        <img src="images/button1_off.gif" alt="button1" id="button1" /></a>&nbsp;&nbsp;
    <a href="next2.html">
        <img src="images/button2_off.gif" alt="button2" id="button2" /></a>

JavaScript 程式碼：

   1: window.onload = rolloverInit;
   2:  
   3: function rolloverInit() {
   4:     for (var i = 0; i < document.images.length; i++) {
   5:         if (document.images[i].parentNode.tagName == "A") {
   6:             setupRollover(document.images[i]);
   7:         }
   8:     }
   9: }
  10:  
  11: function setupRollover(currentImage) {
  12:     currentImage.outImage = new Image();
  13:     currentImage.outImage.src = currentImage.src;
  14:     currentImage.onmouseout = function() {
  15:         this.src = this.outImage.src;
  16:     }
  17:  
  18:     currentImage.overImage = new Image();
  19:     currentImage.overImage.src = "images/" + currentImage.id + "_on.gif";
  20:     currentImage.onmouseover = function() {
  21:         this.src = this.overImage.src;
  22:     }
  23: }

執行介面：

))7WTYBP7H(UAK(LUYH3MMR

圖1 兩狀態翻轉器：滑鼠停留在 Button2 後該圖改變

說明：

1，第 1 行，頁面載入完成後，執行 rolloverInit；

2，第 3 ～9 行，設定介面的 <img> 的翻轉功能；

3，第 14 ～ 16 行和第 20 ～ 21 行，為 currentImage 新增 onmouseout 和 onmouseover 事件。currentImage 是頁面 <img> 標記作為一個物件傳給函式 setupRollover；

4，第 12 ～ 13 行和第 18 ～ 19 行，為 currentImage 新建兩個物件 outImage 和 overImage，用來快取翻轉時用到的圖片。這點比較重要，產生動畫效果，需要確保替換的影像立刻出現，而不能從伺服器現獲得，從而造成延遲。

 

三狀態翻轉器

在兩狀態翻轉器基礎上，還可以讓滑鼠點選後的影像也不同，從而實現三狀態翻轉器。頁面 HTML 標記如下：

<div>
    <img src="images/button1_off.gif" alt="button1" id="button1" /></div>
&nbsp;&nbsp;
<div>
    <img src="images/button2_off.gif" alt="button2" id="button2" /></div>

JavaScript 程式碼：

window.onload = rolloverInit;
 
function rolloverInit() {
    for (var i = 0; i < document.images.length; i++) {
        if (document.images[i].parentNode.tagName == "DIV") {
            setupRollover(document.images[i]);
        }
    }
}
 
function setupRollover(currentImage) {
    currentImage.outImage = new Image();
    currentImage.outImage.src = currentImage.src;
    currentImage.onmouseout = function() {
        this.src = this.outImage.src;
    }
 
    currentImage.clickImage = new Image();
    currentImage.clickImage.src = "images/" + currentImage.id + "_click.gif";
    currentImage.onclick = function() {
        this.src = this.clickImage.src;
    }
 
    currentImage.overImage = new Image();
    currentImage.overImage.src = "images/" + currentImage.id + "_on.gif";
    currentImage.onmouseover = function() {
        this.src = this.overImage.src;
    }
}

執行介面：

G6@KIN$ZVSHQ`UYPJ(TY5GD

圖2 三狀態翻轉器：滑鼠點選 Button1 後該圖改變

說明：

1，快取三個圖片；

2，新增 onmouseout、onmouseover 和 onclick 三個事件。

 

連結觸發翻轉器

也可以由一個標記來觸發翻轉器，如 <a>。頁面 HTML 標記如下：

<h1>
        <a href="next.html" id="arrow">Next page</a></h1>
    <img src="images/arrow_off.gif" id="arrowImg" alt="arrow" />

JavaScript 程式碼如下：

window.onload = rolloverInit;
 
function rolloverInit() {
    for (var i = 0; i < document.links.length; i++) {
        var linkObj = document.links[i];
        if (linkObj.id) { // a tag id="arrow"
            var imgObj = document.getElementById(linkObj.id + "Img"); // img tag id="arrowImg"
            if (imgObj) {
                setupRollover(linkObj, imgObj);
            }
        }
    }
}
 
function setupRollover(thisLink, thisImage) {
    thisLink.imgToChange = thisImage;
    thisLink.onmouseout = function() {
        this.imgToChange.src = this.outImage.src;
    }
    thisLink.onmouseover = function() {
        this.imgToChange.src = this.overImage.src;
    }
 
    thisLink.outImage = new Image();
    thisLink.outImage.src = thisImage.src;
 
    thisLink.overImage = new Image();
    thisLink.overImage.src = "images/" + thisLink.id + "_on.gif";
}

執行介面：

NE7M]%0_`_~KTQ82{VHU{~4

圖3 連結觸發翻轉器：滑鼠停留在 Next page 後改變

 

下載 Demo

相關文章