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

时间：2021-05-26

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

首先附上个人的文件路径

对于css 和 js文件不需要过多的解释在这里要注意的是pages文件夹这里个文件夹下放的是需要预览的图片文件所以
我们想展示的资源就放在这个目录下面！！！！！！

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

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

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

<!doctype html> <html lang="en">  <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="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> <script> $(function () { var next_button = $(".next-button"); //初始化左右箭头 var previous_button = $(".previous-button"); setArrows(); }); </script> </head> <body> <div id="canvas">  <div class="zoom-icon zoom-icon-in"> </div> <div class="magazine-viewport"> <div class="container"> <div class="magazine"> </div> </div> <div ignore="1" class="next-button"> </div>  <div ignore="1" class="previous-button"> </div> </div> <script type="text/javascript"> 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'); 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 }); </script> </div> </body> </html> <![endif]--></div> </html> </html> </html> </html>

一：在其中值得注意的是：对于js的引用有两处！

1：是开头这里引用了css和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实现图书翻页效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

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

相关文章

微信小程序 利用css实现遮罩效果实例详解

JavaScript实现简单的弹窗效果

JavaScript生成的动态下雨背景效果实现方法

js实现精美的图片跟随鼠标效果实例

javascript的tab切换原理与效果实现方法

微信小程序利用css实现遮罩效果实例详解