Page turning of JavaScript books-20Things_PageFlip_Example

If you have read the website designed by Google & lt; 20 instructions on browsers and networks & gt;, you will definitely like the simulated page flip effect. many technical blogs say that the source code of the website has been released: Ghost

If you have read a website designed by Google <关于浏览器和网络的 20 项须知> , Will certainly like the simulation of the page flip effect.

Many technical blog said the site source code released: http://code.google.com/p/20thingsilearned/

However, the download link cannot be found.

After searching, I finally found it on html5rocks.

After downloading and testing, I was somewhat disappointed. The function is much weaker than 20 thingsilearned.

However, the source code is very concise and neat, with detailed remarks, and then with html5rocks tutorial, you will soon be able to understand the source code, you can customize different styles on your own.

However, a small Bug was found during the use process.

So I simply changed the source code and put it on for trial and modification.

: Https://github.com/jiancm2011/20Things_PageFlip_Example

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

 

This modification mainly solves the problem of incorrect variable page Calculation During page turning.

A new variable "ction" is added to determine the direction of the mouse turning page.

[Javascript]
Var direction = ""; // Record the mouse position)
Var direction = ""; // Record the mouse position)

 

The following two functions are modified.

[Javascript]
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 shoshould navigate
If (mouse. x <0 ){
Flipspolici2.16.tar get =-1;
If (direction = "right "){
Page = Math. min (page + 1, flips. length );
}
}
If (mouse. x> 0 ){
Flipspolici2.16.tar get = 1;
If (direction = "left "){
Page = Math. max (page-1, 0 );
}
}
}
// Console. log ("page:" + page + "; flips [" + I + "].tar get:" + flips? I =.tar get + "; flips [" + I + "]. dragging: "+ flips [I]. dragging );
Flips [I]. dragging = false;
}
// Console. log ("");
}

Excerpt from jian sheng's code Memorandum