最近項目經理我個項目練練手，其項目需求是要實現翻書效果，看到這個需求后，我真是懵了，這咋整，我可是java出身的啊，這個問題真是難住我了，后來有同事的指導，之前他曾經做過PC版的翻書效果，當時使用的是Turn.js ，查過其相關API后，整個人突然豁然開朗呀，使用Turn.js 完全可以解決當前我接手這個項目的所有需求呀。下面小編把我的學習心得分享給大家，大家可以參考下

下面是我這個項目上線后的效果：

看過實際項目后，各位看官是不是已經迫不及待的想知道這個項目是如何實現，看官莫急，接下來我就詳細的介紹下我的開發過程：

1、需要引入的腳本文件

2、html部分代碼

Turn.js 實現翻書效果

//自定義仿iphone彈出層

(function ($) {

//ios confirm box

jQuery.fn.confirm = function (title, option, okCall, cancelCall) {

var defaults = {

title: null, //what text

cancelText: '取消', //the cancel btn text

okText: '確定' //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 = $('

');

var dom = $('

').appendTo(dom);

var dom_content = $('

').html(o.title).appendTo(dom);

var dom_btn = $('

').appendTo(dom);

var btn_cancel = $('').html(o.cancelText).appendTo(dom_btn);

var btn_ok = $('').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 () {

});

});

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 += '

} else if (i == 41) {

tagHtml += '

} else {

tagHtml += '

}

}

$(".flipbook").append(tagHtml);

var w = $(".graph").width();

$(".flipbook-viewport").show();

});

//配置turn.js

function 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({

// Width

width: w,

// Height

height: h,

// Elevation

elevation: ,

display: 'single',

// Enable gradients

gradients: true,

// Auto center this flipbook

autoCenter: 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、代碼打包 下載

總結

以上是生活随笔為你收集整理的html局部翻页效果,基于Turn.js 实现翻书效果实例解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。