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 用来判断鼠标翻页的方向.

var direction = ""; //判断鼠标翻页的方向(Record the mouse position)

并对下面两个函数进行了一点修改.

	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(" ");
	}