为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐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实现图书翻页效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！