首頁 > 開發者 > JavaScript
基於Turn.js 實現翻書效果執行個體解析，turn.js翻書
最近專案經理我個項目練練手，其項目需求是要實現翻書效果，看到這個需求後，我真是懵了，這咋整，我可是java出身的啊，這個問題真是難住我了，後來有同事的指導，之前他曾經做過PC版的翻書效果，當時使用的是Turn.js ，查過其相關API後，整個人突然豁然開朗呀，使用Turn.js 完全可以解決當前我接手這個項目的所有需求呀。下面小編把我的學習心得分享給大家，大家可以參考下
Turn.js的官方網址: http://www.turnjs.com/
下面是我這個項目上線後的效果：
看過實際項目後，各位看官是不是已經迫不及待的想知道這個項目是如何?，看官莫急，接下來我就詳細的介紹下我的開發過程：
1、需要引入的指令檔
<link rel="stylesheet" type="text/css" href="css/basic.css"/><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script><script type="text/javascript" src="js/main.js"></script>
2、html部分代碼
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome="/><meta name="viewport" content="width=device-width, initial-scale=., user-scalable=no"/><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><title>Turn.js 實現翻書效果</title><link rel="stylesheet" type="text/css" href="css/basic.css"/><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script><script type="text/javascript" src="js/main.js"></script></head><body><div class="shade"><div class="sk-fading-circle"><div class="sk-circle1 sk-circle"></div><div class="sk-circle2 sk-circle"></div><div class="sk-circle3 sk-circle"></div><div class="sk-circle4 sk-circle"></div><div class="sk-circle5 sk-circle"></div><div class="sk-circle6 sk-circle"></div><div class="sk-circle7 sk-circle"></div><div class="sk-circle8 sk-circle"></div><div class="sk-circle9 sk-circle"></div><div class="sk-circle10 sk-circle"></div><div class="sk-circle11 sk-circle"></div><div class="sk-circle12 sk-circle"></div></div><div class="number"></div></div><div class="flipbook-viewport" style="display:none;"><div class="previousPage"></div><div class="nextPage"></div><div class="return"></div><img class="btnImg" src="./image/btn.gif" style="display: none"/><div class="container"><div class="flipbook"></div></div></div><script>//自訂仿iphone彈出層(function ($) {//ios confirm boxjQuery.fn.confirm = function (title, option, okCall, cancelCall) {var defaults = {title: null, //what textcancelText: '取消', //the cancel btn textokText: '確定' //the ok btn text};if (undefined === option) {option = {};}if ('function' != typeof okCall) {okCall = $.noop;}if ('function' != typeof cancelCall) {cancelCall = $.noop;}var o = $.extend(defaults, option, {title: title, okCall: okCall, cancelCall: cancelCall});var $dom = $(this);var dom = $('<div class="g-plugin-confirm">');var dom = $('<div>').appendTo(dom);var dom_content = $('<div>').html(o.title).appendTo(dom);var dom_btn = $('<div>').appendTo(dom);var btn_cancel = $('<a href="#"></a>').html(o.cancelText).appendTo(dom_btn);var btn_ok = $('<a href="#"></a>').html(o.okText).appendTo(dom_btn);btn_cancel.on('click', function (e) {o.cancelCall();dom.remove();e.preventDefault();});btn_ok.on('click', function (e) {o.okCall();dom.remove();e.preventDefault();});dom.appendTo($('body'));return $dom;};})(jQuery);//上一頁$(".previousPage").bind("touchend", function () {var pageCount = $(".flipbook").turn("pages");//總頁數var currentPage = $(".flipbook").turn("page");//當前頁if (currentPage >= 2) {$(".flipbook").turn('page', currentPage - 1);} else {}});// 下一頁$(".nextPage").bind("touchend", function () {var pageCount = $(".flipbook").turn("pages");//總頁數var currentPage = $(".flipbook").turn("page");//當前頁if (currentPage <= pageCount) {$(".flipbook").turn('page', currentPage + 1);} else {}});//返回到目錄頁$(".return").bind("touchend", function () {$(document).confirm('您確定要返回首頁嗎?', {}, function () {$(".flipbook").turn('page', ); //跳轉頁數}, function () {});});</script></body></html>
3、主要js實現部分
//判斷手機類型window.onload = function () {//alert($(window).height());var u = navigator.userAgent;if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手機} else if (u.indexOf('iPhone') > -1) {//蘋果手機//屏蔽ios下上下彈性$(window).on('scroll.elasticity', function (e) {e.preventDefault();}).on('touchmove.elasticity', function (e) {e.preventDefault();});} else if (u.indexOf('Windows Phone') > -1) {//winphone手機}//預先載入loading();}var date_start;var date_end;date_start = getNowFormatDate();//載入圖片var loading_img_url = ["./image/0001.jpg","./image/0002.jpg","./image/0003.jpg","./image/0004.jpg","./image/0005.jpg","./image/0006.jpg","./image/0007.jpg","./image/0008.jpg","./image/0009.jpg","./image/0010.jpg","./image/0011.jpg","./image/0012.jpg","./image/0013.jpg","./image/0014.jpg","./image/0015.jpg","./image/0016.jpg","./image/0017.jpg","./image/0018.jpg","./image/0019.jpg","./image/0020.jpg","./image/0021.jpg","./image/0022.jpg","./image/0023.jpg","./image/0024.jpg","./image/0025.jpg","./image/0026.jpg","./image/0027.jpg","./image/0028.jpg","./image/0029.jpg","./image/0030.jpg","./image/0031.jpg","./image/0032.jpg","./image/0033.jpg","./image/0034.jpg","./image/0035.jpg","./image/0036.jpg","./image/0037.jpg","./image/0038.jpg","./image/0039.jpg","./image/0040.jpg","./image/0041.jpg",];//載入頁面function loading() {var numbers = 0;var length = loading_img_url.length for (var i = 0; i < length; i++) {var img = new Image();img.src = loading_img_url[i];img.onerror = function () {numbers += (1 / length) * 100;}img.onload = function () {numbers += (1 / length) * 100;$('.number').html(parseInt(numbers) + "%");console.log(numbers);if (Math.round(numbers) == 100) {//$('.number').hide();date_end = getNowFormatDate();var loading_time = date_end - date_start;//預先載入圖片$(function progressbar() {//拼接圖片$('.shade').hide();var tagHtml = "";for (var i = 1; i <= 41; i++) {if (i == 1) {tagHtml += ' <div id="first" style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>';} else if (i == 41) {tagHtml += ' <div id="end" style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>';} else {tagHtml += ' <div style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%"></div>';}}$(".flipbook").append(tagHtml);var w = $(".graph").width();$(".flipbook-viewport").show();});//配置turn.jsfunction loadApp() {var w = $(window).width();var h = $(window).height();$('.flipboox').width(w).height(h);$(window).resize(function () {w = $(window).width();h = $(window).height();$('.flipboox').width(w).height(h);});$('.flipbook').turn({// Widthwidth: w,// Heightheight: h,// Elevationelevation: ,display: 'single',// Enable gradientsgradients: true,// Auto center this flipbookautoCenter: true,when: {turning: function (e, page, view) {if (page == ) {$(".btnImg").css("display", "none");$(".mark").css("display", "block");} else {$(".btnImg").css("display", "block");$(".mark").css("display", "none");}if (page == 41) {$(".nextPage").css("display", "none");} else {$(".nextPage").css("display", "block");}},turned: function (e, page, view) {console.log(page);var total = $(".flipbook").turn("pages");//總頁數if (page == 1) {$(".return").css("display", "none");$(".btnImg").css("display", "none");} else {$(".return").css("display", "block");$(".btnImg").css("display", "block");}if (page == 2) {$(".catalog").css("display", "block");} else {$(".catalog").css("display", "none");}}}})}yepnope({test: Modernizr.csstransforms,yep: ['js/turn.js'],complete: loadApp});};}}}function getNowFormatDate() {var date = new Date();var seperator1 = "";var seperator2 = "";var month = date.getMonth() + ;var strDate = date.getDate();if (month >= 1 && month <= 9) {month = "0" + month;}if (strDate >= 0 && strDate <= 9) {strDate = "0" + strDate;}var currentdate = date.getFullYear() + seperator + month + seperator + strDate+ "" + date.getHours() + seperator2 + date.getMinutes()+ seperator2 + date.getSeconds();return currentdate;}
4、最終實現結果
幫客之家友情提醒大家需要注意事項：圖片是從網上隨便下載的，所以圖片的尺寸不規範，導致在手機上瀏覽時圖片不是很完整【不是因為代碼寫的有問題哦】 !!! 代碼打包中沒有加入真實項目中的圖片，如需看到最佳的效果，建議圖片尺寸設計為:750*1217，由於個人的時間和精力有限，我寫的這個Demo使用的圖片就沒有將圖片一一修改為750*1217的尺寸。
5、代碼打包 下載
http://xiazai.jb51.net/201605/yuanma/Turn.js 實現翻書效果(jb51.net).rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
