Turn.js (page turn effect) summary

Turn.js is a built-in jquery paging plugin

1 introduction of <script type= "Text/javascript" src= "js/turn.js" in HTML ></script>

2 Creating HTML

<DivId="FlipBook" ><Divclass="Hard" > Turn.js</Div><Divclass="Hard" ></Div><div> Page 1 </div> <div> Page 2 </div> <div> Page 3 </div> < div> page 4 </div> <div class= "hard" ></ div> <div class= "hard" ></div></ DIV> 
 
              

3 JavaScript section

$ ("#flipbook"). Turn ({$  ,    true});   

4. Available options, properties, methods, events, CSS classes

　Options:

 (1 Acceleration: Set hardware acceleration mode, this value must be true for touch devices. 
 Acceleration:true; 
 (2) Direction: Specifies the direction of FlipBook from left to right (dir=ltr, default) or right-to-left (DIR=RTL). 
 A.     $ ( "#flipbook"). Turn ({
 Direction: ' RTL ' 
}) 
 B.<div id= "FlipBook" dir= "RTL" >< /div> 
 C. #flipbook {
 Direction:rtl 
} 
 (3) Duration: Sets the speed of page flipping 
 duration:600 if set to 0 does not produce a page turn effect  (4) Gradients: Show gradients and Shadows during page flipping     

Gradients:true
(5) Width: Length of page: Height of page
    Width:num Height:num
(6) Elevation: Height of page during conversion
    elevation:0
(7) Page: Set the number of pages when initializing
Page:1
(8) Pages: Set any number of pages. If the number of pages is greater than the number of elements in #flipbook, use the AddPage method to add these pages dynamically.
    $ ("#flipbook"). Children (). Length ()
(9) When: Event listener. Key must be used in the event list
    $ ("#flipbook"). Turn ({
when:{
Turned:function (E, page) {
if (page==1) {
}
if (page==2) {
}
}
}
})
Property:
(1) animating:    Returns True when the collapsed page is displayed,

functionIsanimating() {if ($ ("#flipbook"). Turn ("animating") {alert (' Animating a page! '); }　　}
(2) Direction: Returns the direction of the current page turn
$ ("#flipbook). Turn (" direction ")
(3) Display: Gets whether the current display is a single page or a double page
$ ("#flipbook). Turn (" display ")
(4) Page: Gets the current page as the first page
$ ("#flipbook). Turn (" page ")
(5) Pages: Get the total number of pages
$ ("#flipbook"). Turn ("pages")
(6) Size: Gets the high width of the flipbook
$ ("#flipbook"). Turn ("size") gets a value of two values Size.width and Size.Height
 Method:
(1) AddPage: add page to FlipBook
For example, insert page 10th:
element=$ ("<div/>"). HTML ("Loading");
$ ("#flipbook"). Turn ("Addpagge", element,10)
(2) Destroy: Delete all pages
$ ("#flipbook"). Turn ("destroy"). Remove ();
(3) Direction: Set the direction of the FlipBook
$ ("#flipbook"). Turn ("Direciton", "RTL")
(4) Display: Set a single page or two pages
$ ("#flipbook"). Turn ("Display", "single")
(5) Next turn the view to the next
$ ("#flipbook"). Turn ("Next")
$ ("#flipbook"). Turn ("Next"). Turn ("Next")
(6) Options: Changing the value of an option
$ ("#flipbook"). Turn ("Options", {display: "single", Duration:})
(7) Page: Jumps to the specified page
$ ("#fllipbook"). Turn ("page", 10)
(8) Previous: Go to the previous view
$ ("#flipbook"). Turn ("previous")
(9) Removepage: Delete the specified page
$ ("#flipbook"). Turn ("Removepage", 10)
Resize: Recalculate the size of the page
$ ("FlipBook"). Turn ("resize")
Stop: Stop the current transition
$ ("#flipbook"). Turn ("page"). Turn ("Stop")

　

Turn.js (page turn effect) summary