JavaScript 圖書翻頁效果 – 20Things_PageFlip_Example

如果有看過Google所設計的網站<關於瀏覽器和網絡的 20 項須知>,一定會喜歡上那仿真的翻頁效果.

不少技術博客都說該網站的源碼放出來瞭:https://code.google.com/p/20thingsilearned/

但卻找不到下載的鏈接.

經過苦苦尋找,終於在html5rocks上面找到瞭.

下載下來測試一下之後,多少有點失望,功能上相比20thingsilearned,實在弱太多瞭.

不過源碼寫得十分簡潔和工整,有詳細的備註,再配合html5rocks的tutorial,很快就能弄懂源碼,就可以自己去定制不同的風格瞭.

但在使用的過程中,發現瞭一個翻頁時的小Bug.

所以幹脆自己改瞭一下源碼,順便放上來讓大傢試用和修改.

下載地址:https://github.com/jiancm2011/20Things_PageFlip_Example

Demo:https://maplejan.com/codelaboratory/code/html5/20Things_PageFlip_Example

 

本次修改,主要解決瞭翻頁時變量page計算錯誤的問題.

加入瞭一個新變量 direction 用來判斷鼠標翻頁的方向.

[javascript]
var direction = ""; //判斷鼠標翻頁的方向(Record the mouse position) 
var direction = ""; //判斷鼠標翻頁的方向(Record the mouse position)

 

並對下面兩個函數進行瞭一點修改.

[javascript]
<span style="white-space:pre">    </span>function mouseDownHandler( event ) { 
        // Make sure the mouse pointer is inside of the book  
        if (Math.abs(mouse.x) < PAGE_WIDTH) { 
            if (mouse.x < 0 && page – 1 >= 0) { 
                // We are on the left side, drag the previous page  
                flips[page – 1].dragging = true;     
                direction = "left"; 
            } 
            else if (mouse.x > 0 && page + 1 < flips.length) { 
                // We are on the right side, drag the current page  
                flips[page].dragging = true; 
                direction = "right"; 
            } 
        } 
        // Prevents the text selection  
        event.preventDefault(); 
    } 
     
    function mouseUpHandler( event ) { 
        for( var i = 0; i < flips.length; i++ ) { 
            // If this flip was being dragged, animate to its destination  
            if( flips[i].dragging ) { 
                // Figure out which page we should navigate to  
                if( mouse.x < 0 ) { 
                    flips[i].target = -1; 
                    if(direction == "right") { 
                        page = Math.min( page + 1, flips.length ); 
                    } 
                } 
                if(mouse.x > 0){ 
                    flips[i].target = 1; 
                    if(direction == "left") { 
                        page = Math.max( page – 1, 0 ); 
                    } 
                } 
            } 
            //console.log("page:" + page + ";  flips[" + i + "].target:" + flips[i].target + ";  flips[" + i + "].dragging:" + flips[i].dragging);  
            flips[i].dragging = false; 
        } 
        //console.log(" ");  
    } 

摘自 簡生的代碼備忘錄