javaScript+turn.js实现图书翻页效果实例代码资源-CSDN文库

161 浏览量 2020-10-20 10:13:36 上传评论收藏 80KB PDF 举报

JavaScript和Turn.js库结合使用，可以创建出模拟真实图书翻页效果的互动式电子书或杂志。Turn.js是一个强大的JavaScript插件，它提供了丰富的自定义选项和流畅的动画效果，适用于网页上的数字出版物。理解Turn.js的用法至关重要。在开始使用之前，确保你的项目已经包含了必要的CSS和JavaScript文件。在提供的代码段中，可以看到`index.html`头部引入了一系列外部文件，包括jQuery、Modernizr（用于检测浏览器特性）以及Turn.js的相关文件。这些文件为实现翻页效果提供了基础。 ```html <head> ... <link href="css/magazine.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery.min.1.7.js"></script> <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script> <script type="text/javascript" src="js/hash.js"></script> <script type="text/javascript" src="js/turn.js"></script> <script type="text/javascript" src="js/turn.html4.min.js"></script> <script type="text/javascript" src="js/zoom.min.js"></script> <script type="text/javascript" src="js/magazine.js"></script> ... </head> ``` Turn.js的工作原理是将HTML元素（通常是`<div>`）转换成可翻页的内容。这些元素通常包含在`<div id="canvas">`内，并且每个页面都应该有一个唯一的类名，例如`page1`、`page2`等。在示例中，所有页面资源存储在`pages`文件夹中，以数字命名，便于Turn.js按顺序加载。要使用Turn.js，你需要创建一个元素，然后调用`.turn()`方法，如： ```javascript $("#your-element").turn({ width: 800, // 页面宽度 height: 600, // 页面高度 pages: 10, // 总页数 gradients: true, // 是否启用渐变效果 duration: 1000, // 翻页动画时长 }); ``` 此外，Turn.js还支持其他功能，如添加封面和封底，实现平滑的3D翻页效果，以及设置翻页方向等。在提供的代码中，可以看到用于控制左右翻页按钮的逻辑，这是通过jQuery选择器选取元素并绑定事件处理函数来实现的。 ```javascript $(function () { var next_button = $(".next-button"); var previous_button = $(".previous-button"); setArrows(); }); ``` `magazine.js`可能包含了一些自定义功能，比如页面切换事件监听、缩放功能（由`zoom.min.js`支持）以及其他交互逻辑。总结起来，要使用Turn.js实现图书翻页效果，你需要准备包含页面内容的HTML元素，正确引入依赖库，设置Turn.js的参数，以及可选地添加控制按钮和自定义功能。通过这种方式，你可以创建出富有视觉吸引力和互动性的数字阅读体验。记得在实际项目中，根据需求调整样式、大小和功能，以适应不同的设计和用户体验目标。

资源推荐

资源详情

资源评论

javaScript+turn.js实现图书翻页效果实例代码实现图书翻页效果实例代码

主要介绍了javaScript+turn.js实现图书翻页效果实例代码,重点讲解turn.js 如何使用的。需要的朋友可以参考下

为了实现图书翻页的效果我们在网上可以看到很多教程在这里推荐turn.js 网上的turn.js 有api 不过是英文的很多人看起来不

方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使

用！！！！！！！文章最后提供源码下载，结合源码看本文，turn.js更简单！

首先附上个人的文件路径

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

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

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

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

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

<!doctype html><!--[if lt IE 7 ]>

<![endif]--><!--[if IE 7 ]>

<![endif]--><!--[if IE 8 ]>

<![endif]--><!--[if IE 9 ]>

<![endif]--><!--[if !IE]>

<!-->

<head>

<title>Using turn.js and the new zoom feature</title>

$(function () {

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

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

setArrows();

});

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

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;

$('<div />', {'class': 'exit-message'}).

html('<div>Press ESC to exit</div>').

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');

剩余7页未读，继续阅读

评论收藏

内容反馈

weixin_38666753

粉丝: 7
资源: 909

javaScript+turn.js实现图书翻页效果实例代码

turn.js电子书翻页特效实例

turn.js实现图书翻页

turn.js电子书翻页

turnjs帮助文档

Flipbook-turn.js:目录 2015 演示

移动端H5开发 Turn.js实现很棒的翻书效果

Turn.js 实现翻书效果(自适应单双页).zip

turn.js

turn.js实现书本翻页效果插件

基于turn.js实现翻书翻页动画效果.zip

前端实现图书翻页(支持正向和逆向翻页)效果(含代码和演示视频)

代码实例之纯CSS代码实现翻页效果

turn.js实现翻书效果(自适应单双页)

turn.js实现pc端翻书效果

jQuery+turn.js翻书、文档和杂志.zip

turn.js实现翻书效果.zip

turn书本翻页插件

turn.js 模拟书籍翻页

booke翻书效果js

静态书架和js模拟翻书效果

利用turn.js制作电子书

基于javascript html5实现3D翻书特效

turn.js异步加载实现翻书效果

turn.js+pdf.js资源

Vue实现简易翻页效果源码分享

基于Vue的精简阅读器的实现（采用Epub.js）

基于html5实现3D翻书特效源码.zip

最新资源