Turn.js的官方网址: http://www.turnjs.com/
官网上运行demo如下，大家主要关注是 属性使用：
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.min.1.7.js"></script> <script type="text/javascript" src="modernizr.2.5.3.min.js"></script> </head> <body> <div class="flipbook-viewport"> <div class="container"> <div class="flipbook"> <div>1111111111111</div> <div>2222222222222</div> <div>3333333333333</div> <div>4444444444444</div> <div>5555555555555</div> <div>6666666666666</div> <div>7777777777777</div> <div>8888888888888</div> <div>9999999777999</div> </div> </div> </div> <script type="text/javascript"> function loadApp() { // Create the flipbook $('.flipbook').turn({ // Width 922, // Height height: 600, // Elevation elevation: 50, // Enable gradients gradients: true, // Auto center this flipbook autoCenter: true }); } // Load the HTML4 version if there's not CSS transform yepnope({ test: Modernizr.csstransforms, yep: ['turn.js'], both: ['basic.css'], complete: loadApp }); </script> </body> </html>
属性使用：
display: 'single' 显示单页 默认是双页
when: function(){ // 事件监听
turning: function(event, page, view){
alert(page)
},
turned: function(){}
}
可以设置上一页 及 下一页 跳转指定页
// Turn to the page 10
$("#flipbook").turn("page", 10);