RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
javaScript+turn.js如何实现图书翻页效果

小编给大家分享一下javaScript+turn.js如何实现图书翻页效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

十多年的保山网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整保山建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“保山网站设计”,“保山网站推广”以来，每个客户项目都认真落实执行。

首先附上个人的文件路径

javaScript+turn.js如何实现图书翻页效果

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

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

javaScript+turn.js如何实现图书翻页效果

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

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

 
 
 
 
 Using turn.js and the new zoom feature 
  
  
  
  
  
  
  
  
  
  
 
 
 
  
  
 
              
   
      
         
   
      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;      $('', {'class': 'exit-message'}).      html('
Press ESC to exit
').      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   });    
     
       

一：在其中值得注意的是：对于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 = $('', {}); 
 // 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('
');   // Load the page   loadPage(page, element);   }  }  function loadPage(page, pageElement) {   // Create an image element   var 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 = $('', {   '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.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

以上是“javaScript+turn.js如何实现图书翻页效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


分享标题：javaScript+turn.js如何实现图书翻页效果
文章出自：http://cqwzjz.cn/article/pjjpgg.html

其他资讯

快速导航
友情链接
网站建设
联系方式
  • 企业：青羊区大橙子信息咨询工作室
  • 地址：成都市青羊区太升南路288号
  • 电话：18980820575
  • 网址：www.cqwzjz.cn

公司名称：青羊区大橙子信息咨询工作室 联系电话：18980820575

网站备案号：蜀ICP备2022028542号-22

重庆大橙子建站 重庆网站建设 重庆网站设计 重庆网站制作 成都做网站