JavaScript 图书翻页效果

如果有看过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(); 
    }