为了实现图书翻页的效果我们在网上可以看到很多教程在这里推荐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 = book.turn('page'),
pages = book.turn('pages');
// Update the current URI
Hash.go('page/' + page).update();
// Show and hide navigation buttons
disableControls(page);
},
turned: function (event, page, view) {
disableControls(page);
$(this).turn('center');
if (page == 1) {
$(this).turn('peel', 'br');
}
},
missing: function (event, pages) {
// Add pages that aren't in the magazine
for (var i = 0; i < pages.length; i++)
addPage(pages[i], $(this));
}
}
});
// Zoom.js
$('.magazine-viewport').zoom({
flipbook: $('.magazine'),
max: function () {
return largeMagazineWidth() / $('.magazine').width();
},
when: {
swipeLeft: function () {
$(this).zoom('flipbook').turn('next');
},
swipeRight: function () {
$(this).zoom('flipbook').turn('previous');
},
resize: function (event, scale, page, pageElement) {
if (scale == 1)
loadSmallPage(page, pageElement);
else
loadLargePage(page, pageElement);
},
zoomIn: function () {
$('.made').hide();
$('.magazine').removeClass('animated').addClass('zoom-in');
$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
if (!window.escTip && !$.isTouch) {
escTip = true;
$('
html('
Press ESC to exit').
appendTo($('body')).
delay(2000).
animate({opacity: 0}, 500, function () {
$(this).remove();
});
}
},
zoomOut: function () {
$('.exit-message').hide();
$('.thumbnails').fadeIn();
$('.made').fadeIn();
$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
setTimeout(function () {
$('.magazine').addClass('animated').removeClass('zoom-in');
resizeViewport();
}, 0);
}
}
});
// Zoom event
if ($.isTouch)
$('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
else
$('.magazine-viewport').bind('zoom.tap', zoomTo);
// Using arrow keys to turn the page
$(document).keydown(function (e) {
var previous = 37, next = 39, esc = 27;
switch (e.keyCode) {
case previous:
// left arrow
$('.magazine').turn('previous');
e.preventDefault();
break;
case next:
//right arrow
$('.magazine').turn('next');
e.preventDefault();
break;
case esc:
$('.magazine-viewport').zoom('zoomOut');
e.preventDefault();
break;
}
});
// URIs - Format #/page/1
Hash.on('^page\/([0-9]*)$', {
yep: function (path, parts) {
var page = parts[1];
if (page !== undefined) {
if ($('.magazine').turn('is'))
$('.magazine').turn('page', page);
}
},
nop: function (path) {
if ($('.magazine').turn('is'))
$('.magazine').turn('page', 1);
}
});
$(window).resize(function () {
resizeViewport();
}).bind('orientationchange', function () {
resizeViewport();
});
// Events for thumbnails
$('.thumbnails').click(function (event) {
var page;
if (event.target && (page = /page-([0-9]+)/.exec($(event.target).attr('class')))) {
$('.magazine').turn('page', page[1]);
}
});
$('.thumbnails li').
bind($.mouseEvents.over, function () {
$(this).addClass('thumb-hover');
}).bind($.mouseEvents.out, function () {
$(this).removeClass('thumb-hover');
});
if ($.isTouch) {
$('.thumbnails').
addClass('thumbanils-touch').
bind($.mouseEvents.move, function (event) {
event.preventDefault();
});
} else {
$('.thumbnails ul').mouseover(function () {
$('.thumbnails').addClass('thumbnails-hover');
}).mousedown(function () {
return false;
}).mouseout(function () {
$('.thumbnails').removeClass('thumbnails-hover');
});
}
// Regions
if ($.isTouch) {
$('.magazine').bind('touchstart', regionClick);
} else {
$('.magazine').click(regionClick);
}
// Events for the next button
$('.next-button').bind($.mouseEvents.over, function () {
$(this).addClass('next-button-hover');
}).bind($.mouseEvents.out, function () {
$(this).removeClass('next-button-hover');
}).bind($.mouseEvents.down, function () {
$(this).addClass('next-button-down');
}).bind($.mouseEvents.up, function () {
$(this).removeClass('next-button-down');
}).click(function () {
$('.magazine').turn('next');
setTimeout(function () {
setArrows();
}, 300);
});
// Events for the next button
$('.previous-button').bind($.mouseEvents.over, function () {
$(this).addClass('previous-button-hover');
}).bind($.mouseEvents.out, function () {
$(this).removeClass('previous-button-hover');
}).bind($.mouseEvents.down, function () {
$(this).addClass('previous-button-down');
}).bind($.mouseEvents.up, function () {
$(this).removeClass('previous-button-down');
}).click(function () {
$('.magazine').turn('previous');
setTimeout(function () {
setArrows();
}, 300);
});
resizeViewport();
$('.magazine').addClass('animated');
}
// Zoom icon
$('.zoom-icon').bind('mouseover', function () {
if ($(this).hasClass('zoom-icon-in'))
$(this).addClass('zoom-icon-in-hover');
if ($(this).hasClass('zoom-icon-out'))
$(this).addClass('zoom-icon-out-hover');
}).bind('mouseout', function () {
if ($(this).hasClass('zoom-icon-in'))
$(this).removeClass('zoom-icon-in-hover');
if ($(this).hasClass('zoom-icon-out'))
$(this).removeClass('zoom-icon-out-hover');
}).bind('click', function () {
if ($(this).hasClass('zoom-icon-in'))
$('.magazine-viewport').zoom('zoomIn');
else if ($(this).hasClass('zoom-icon-out'))
$('.magazine-viewport').zoom('zoomOut');
});
$('#canvas').hide();
// Load the HTML4 version if there's not CSS transform
yepnope({
test: Modernizr.csstransforms,
yep: ['js/turn.js'],
nope: ['js/turn.html4.min.js'],
both: ['js/zoom.min.js', 'js/magazine.js', 'css/magazine.css'],
complete: loadApp
});
