图书浏览界面html代码,javaScript+turn.js实现图书翻页效果实例代码

为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用！！！！！！！ 文章最后提供源码下载，结合源码看本文，turn.js更简单！

首先附上个人的文件路径

对于css   和 js文件不需要过多的解释   在这里要注意的是pages文件夹   这里个文件夹下放的是需要预览的图片文件    所以

我们想展示的资源  就放在这个目录下面！！！！！！

接下来  先给大家看一下pages下面的资源名称

可以看到  所有的资源都以数字命名  至于为什么  我们在之后会讲解

接下来  我们开始使将turn.js结合到我们自己的项目中  先附上index.html中的代码

Using turn.js and the new zoom feature

$(function () {

var next_button = $(".next-button"); //初始化左右箭头

var previous_button = $(".previous-button");

setArrows();

});

function loadApp() {

$('#canvas').fadeIn(1000);

var flipbook = $('.magazine');

// Check if the CSS was already loaded

if (flipbook.width() == 0 || flipbook.height() == 0) {

setTimeout(loadApp, 10);

return;

}

// 创建flipbook

flipbook.turn({

width: 1200,

height: 781,

duration: 1000, //翻页速度，值越小越快

// Hardware acceleration

acceleration: !isChrome(),

// Enables gradients

gradients: true,

// Auto center this flipbook

autoCenter: true,

// Elevation from the edge of the flipbook when turning a page

elevation: 50,

// The number of pages

pages: 8,

// Events

when: {

turning: function (event, page, view) {

var book = $(this),

currentPage =