华山资源网

javaScript+turn.js实现图书翻页效果实例代码
网络编程 2024/9/25 佚名
3 1

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

首先附上个人的文件路径

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

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

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

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

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

接下来  我们开始使将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实现图书翻页效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com