content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
手机端书本翻页效果renrnenrennre第一页n最后一页
function loadApp() {
//自定义仿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 dom1 = $('
').appendTo(dom);
var dom_content = $('
').html(o.title).appendTo(dom1);
var dom_btn = $('
').appendTo(dom1);
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);
$("#re").bind("touchend", function () {
var pageCount = $(".flipbook").turn("pages");//总页数
var currentPage = $(".flipbook").turn("page");//当前页
$(document).confirm('您确定要返回首页吗?', {}, function () {
$(".flipbook").turn('page', 1); //跳转页数
}, function () {
});
if (currentPage >= 2) {
$(".flipbook").turn('page', currentPage - 1);
} else {
}
});
console.log($(".flipbook").turn("page"));
// Create the flipbook
w = $(window).width();//窗口的宽度
h = $(window).height()；//窗口的高度
$('.flipbook').turn({
// Width
width:w,
// Height
height:h,
// Elevation
elevation: 50,
display:"single",//可选择单页和双页
// Enable gradients
gradients: true, //是否渐变
// Auto center this flipbook
autoCenter: false //是否自动居中
});
}
loadApp()
// 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: ['css/basic.css'],
// complete: loadApp
// });
如果觉得《手机翻书效果html 移动端实现翻书效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
