JavaScript 图书翻页效果 - 20Things_PageFlip_Example

如果有看过Google所设计的网站<关于浏览器和网络的 20 项须知>,一定会喜欢上那仿真的翻页效果.

不少技术博客都说该网站的源码放出来了:http://code.google.com/p/20thingsilearned/

但却找不到下载的链接.

经过苦苦寻找,终于在html5rocks上面找到了.

下载下来测试一下之后,多少有点失望,功能上相比20thingsilearned,实在弱太多了.

不过源码写得十分简洁和工整,有详细的备注,再配合html5rocks的tutorial,很快就能弄懂源码,就可以自己去定制不同的风格了.

但在使用的过程中,发现了一个翻页时的小Bug.

所以干脆自己改了一下源码,顺便放上来让大家试用和修改.

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

Demo:http://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(" ");  
    }