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

(编辑：jimmy 日期: 2024/11/6 浏览：2)

为了实现图书翻页的效果我们在网上可以看到很多教程在这里推荐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 ]> 
<html lang="en" class="ie6"> 
<![endif]--><!--[if IE 7 ]> 
<html lang="en" class="ie7"> 
<![endif]--><!--[if IE 8 ]> 
<html lang="en" class="ie8"> 
<![endif]--><!--[if IE 9 ]> 
<html lang="en" class="ie9"> 
<![endif]--><!--[if !IE]> 
<!--> 
<html lang="en"> 
<!--<![endif]--> 
<head> 
 <title>Using turn.js and the new zoom feature</title> 
 <meta name="viewport" content="width = 1050, user-scalable = no"/> 
 <link href="css/magazine.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"> 
 <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.1.7.js">

一：在其中值得注意的是：对于js的引用 有两处！ 
1：是开头这里引用了css和js


<link href="css/magazine.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.1.7.js">

2：则是index.html的最下方，这里极容易被忽视！！！切记路径不可错误，不然报错！！！！


// 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 
}); 


二：js中的magazine.js   这个js值整个功能实现的支柱   在这里提供了所有的函数。


/* 
 * Magazine sample 
*/ 
//这里是对前页后页的位置设定 
function setArrows() { 
 /*var width = $(window).width(); 
 //alert("chushihua"+width); 
 var height = $(window).height(); 
 var bookWidth = $(".magazine").width(); 
 var bookHeight = $(".magazine").height(); 
 //alert("chushihua"+bookWidth); 
 var arrowSize = $(".next-button").width(); 
 //alert(arrowSize); 
 alert($(".magazine").offset().left+"\n"+$('.next-button').offset().left); 
 var LeftArrowLeft = - ( width - bookWidth ) / 4 + 'px' ; 
 //alert(LeftArrowLeft); 
 var RightArrowLeft = - ( width - bookWidth+ arrowSize*2) / 4 + 'px' ; 
 //alert(RightArrowLeft); 
 //alert(RightArrowLeft); 
 //alert("zhihou"+bookWidth); 
 $('.next-button').css( "right",RightArrowLeft ); 
 $('.previous-button').css( "left", LeftArrowLeft );*/ 
 setTimeout(function(){ 
 var width = $(window).width(); 
 var bookWidth = $(".magazine").width(); 
 var arrowSize = $(".next-button").width(); 
 var magaLeft=$(".magazine").offset().left; 
 var nextLeft= (width-bookWidth-magaLeft-60)/2; 
 //alert("width "+width +"\nbookWidth :"+bookWidth +"\nmagaLeft:"+magaLeft+"\nnextLeft:"+nextLeft); 
 $('.next-button').animate({ "right":nextLeft},300); 
 $('.previous-button').animate({ "left":nextLeft},300); 
 },100); 
} 
//这是用于加载所有的待展示资源 
function addPage(page, book) { 
 var id, pages = book.turn('pages'); 
 // Create a new element for this page 
 var element = $('<div />', {}); 
 // Add the page to the flipbook 
 if (book.turn('addPage', element, page)) { 
 // Add the initial HTML 
 // It will contain a loader indicator and a gradient 
 element.html('<div class="gradient"></div><div class="loader"></div>'); 
 // Load the page 
 loadPage(page, element); 
 } 
} 
function loadPage(page, pageElement) { 
 // Create an image element 
 var img = $('<img />'); 
 img.mousedown(function(e) { 
 e.preventDefault(); 
 }); 
 img.load(function() { 
 // Set the size 
 $(this).css({ 
  width: '100%', 
  height: '100%' 
 }); 
 // Add the image to the page after loaded 
 $(this).appendTo(pageElement); 
 // Remove the loader indicator 
 pageElement.find('.loader').remove(); 
 }); 
 // Load the page 
 img.attr('src', 'pages/' + page + '.png');//这里就是指向展示资源路径，pages/即之前提及的pages文件夹，根据需要可更换。 
 loadRegions(page, pageElement); 
} 
// 这里是识别预览大图还是小图的模式1为大图 
function zoomTo(event) { 
 setTimeout(function() { 
 if ($('.magazine-viewport').data().regionClicked) { 
  $('.magazine-viewport').data().regionClicked = false; 
 } else { 
  if ($('.magazine-viewport').zoom('value') == 1) { 
  $('.magazine-viewport').zoom('zoomIn', event); 
  } else { 
  $('.magazine-viewport').zoom('zoomOut'); 
  } 
 } 
 }, 
 1); 
} 
// 不需了解 
function loadRegions(page, element) { 
 $.getJSON('pages/' + page + '-regions.json').done(function(data) { 
 $.each(data, 
 function(key, region) { 
  addRegion(region, element); 
 }); 
 }); 
} 
// 不需了解 
function addRegion(region, pageElement) { 
 var reg = $('<div />', { 
 'class': 'region ' + region['class'] 
 }), 
 options = $('.magazine').turn('options'), 
 pageWidth = options.width / 2, 
 pageHeight = options.height; 
 reg.css({ 
 top: Math.round(region.y / pageHeight * 100) + '%', 
 left: Math.round(region.x / pageWidth * 100) + '%', 
 width: Math.round(region.width / pageWidth * 100) + '%', 
 height: Math.round(region.height / pageHeight * 100) + '%' 
 }).attr('region-data', $.param(region.data || '')); 
 reg.appendTo(pageElement); 
} 
function regionClick(event) { 
 var region = $(event.target); 
 if (region.hasClass('region')) { 
 $('.magazine-viewport').data().regionClicked = true; 
 setTimeout(function() { 
  $('.magazine-viewport').data().regionClicked = false; 
 }, 
 100); 
 var regionType = $.trim(region.attr('class').replace('region', '')); 
 return processRegion(region, regionType); 
 } 
} 
// 不需了解 
function processRegion(region, regionType) { 
 data = decodeParams(region.attr('region-data')); 
 switch (regionType) { 
 case 'link': 
 window.open(data.url); 
 break; 
 case 'zoom': 
 var regionOffset = region.offset(), 
 viewportOffset = $('.magazine-viewport').offset(), 
 pos = { 
  x: regionOffset.left - viewportOffset.left, 
  y: regionOffset.top - viewportOffset.top 
 }; 
 $('.magazine-viewport').zoom('zoomIn', pos); 
 break; 
 case 'to-page': 
 $('.magazine').turn('page', data.page); 
 break; 
 } 
} 
// 加载大图 
function loadLargePage(page, pageElement) { 
 var img = $('<img />'); 
 img.load(function() { 
 var prevImg = pageElement.find('img'); 
 $(this).css({ 
  width: '100%', 
  height: '100%' 
 }); 
 $(this).appendTo(pageElement); 
 prevImg.remove(); 
 }); 
 // Loadnew page 
 img.attr('src', 'pages/' + page + '-large.png');//这里指向大图路径，当点击预览大图的时候，加载该路径，可根据需要更换。 
} 
// 加载小图 
function loadSmallPage(page, pageElement) { 
 var img = pageElement.find('img'); 
 img.css({ 
 width: '100%', 
 height: '100%' 
 }); 
 img.unbind('load'); 
 // Loadnew page 
 img.attr('src', 'pages/' + page + '.png');//指向小图路径，同上 
} 
// 判断浏览器 
function isChrome() { 
 return navigator.userAgent.indexOf('Chrome') != -1; 
} 
function disableControls(page) { 
 if (page == 1) $('.previous-button').hide(); 
 else $('.previous-button').show(); 
 if (page == $('.magazine').turn('pages')) $('.next-button').hide(); 
 else $('.next-button').show(); 
} 
// 为图书设置宽高 
function resizeViewport() { 
 var width = $(window).width(), 
 height = $(window).height(), 
 options = $('.magazine').turn('options'); 
 $('.magazine').removeClass('animated'); 
 $('.magazine-viewport').css({ 
 width: width, 
 height: height 
 }).zoom('resize'); 
 setArrows() ; 
 if ($('.magazine').turn('zoom') == 1) { 
 var bound = calculateBound({ 
  width: options.width, 
  height: options.height, 
  boundWidth: Math.min(options.width, width), 
  boundHeight: Math.min(options.height, height) 
 }); 
 if (bound.width % 2 !== 0) bound.width -= 1; 
 if (bound.width != $('.magazine').width() || bound.height != $('.magazine').height()) { 
  $('.magazine').turn('size', bound.width, bound.height); 
  if ($('.magazine').turn('page') == 1) $('.magazine').turn('peel', 'br'); 
 } 
 $('.magazine').css({ 
  top: -bound.height / 2, 
  left: -bound.width / 2 
 }); 
 } 
 var magazineOffset = $('.magazine').offset(), 
 boundH = height - magazineOffset.top - $('.magazine').height(), 
 marginTop = (boundH - $('.thumbnails > div').height()) / 2; 
 if (marginTop < 0) { 
 $('.thumbnails').css({ 
  height: 1 
 }); 
 } else { 
 $('.thumbnails').css({ 
  height: boundH 
 }); 
 $('.thumbnails > div').css({ 
  marginTop: marginTop 
 }); 
 } 
 if (magazineOffset.top < $('.made').height()) $('.made').hide(); 
 else $('.made').show(); 
 $('.magazine').addClass('animated'); 
} 
//这里用于返回待预览资源的个数（即书本的页数） 
function numberOfViews(book) { 
 return book.turn('pages') / 2 + 1; 
} 
// 当前页 
function getViewNumber(book, page) { 
 return parseInt((page || book.turn('page')) / 2 + 1, 10); 
} 
// 记录宽度 
function largeMagazineWidth() { 
 return 2214; 
} 
function decodeParams(data) { 
 var parts = data.split('&'), 
 d, 
 obj = {}; 
 for (var i = 0; i < parts.length; i++) { 
 d = parts[i].split('='); 
 obj[decodeURIComponent(d[0])] = decodeURIComponent(d[1]); 
 } 
 return obj; 
} 
function calculateBound(d) { 
 var bound = { 
 width: d.width, 
 height: d.height 
 }; 
 if (bound.width > d.boundWidth || bound.height > d.boundHeight) { 
 var rel = bound.width / bound.height; 
 if (d.boundWidth / rel > d.boundHeight && d.boundHeight * rel <= d.boundWidth) { 
  bound.width = Math.round(d.boundHeight * rel); 
  bound.height = d.boundHeight; 
 } else { 
  bound.width = d.boundWidth; 
  bound.height = Math.round(d.boundWidth / rel); 
 } 
 } 
 return bound; 
} 


在掌握到这些后  便可使用turn.js
最后   展示一下实现的效果，很流畅！！！！
附上源码地址：
TurnBook-150328124836.rar
以上所述是小编给大家介绍的javaScript+turn.js实现图书翻页效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

上一篇：js实现截图保存图片功能的代码示例

下一篇：js+html制作简单验证码

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

最新资源