<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, 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>
|
|
</head>
|
|
<body>
|
<div class="shade">
|
|
<div class="number"></div>
|
</div>
|
<div class="flipbook-viewport" style="display:none;">
|
<div class="previousPage" style="display:none;"></div>
|
<div class="nextPage"></div>
|
<!-- <div class="return"></div> -->
|
<!-- <img class="btnImg" src="./image/btn.gif" /> -->
|
<div class="container">
|
<div class="flipbook">
|
<div style=" background:url(image/1.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/2.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/3.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/4.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/5.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/6.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/7.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/8.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/9.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/10.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/11.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/12.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/13.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/14.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/15.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/16.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/17.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/18.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/19.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/20.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/21.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/22.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/23.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/24.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/25.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/26.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/27.png) no-repeat center;background-size:100% 100%"></div>
|
<div style=" background:url(image/28.png) no-repeat center;background-size:100% 100%"></div>
|
</div>
|
</div>
|
</div>
|
<script>
|
//自定义仿iphone弹出层
|
(function ($) {
|
$(".flipbook-viewport").show();
|
$(".shade").hide();
|
function loadApp () {
|
var w = $(window).width();
|
var h = $(window).height();
|
// var w = "900px";
|
// var h = "600px";
|
$(".flipboox").width(w).height(h);
|
$(window).resize(function () {
|
w = $(window).width();
|
h = $(window).height();
|
// w = "900px";
|
// h = "600px";
|
$(".flipboox").width(w).height(h);
|
});
|
$(".flipbook").turn({
|
// Width
|
width: w,
|
// Height
|
height: h,
|
// Elevation
|
elevation: 50,
|
display: "single",
|
// Enable gradients
|
gradients: true,
|
// Auto center this flipbook
|
// autoCenter: true,
|
|
when: {
|
turning: function (e, page, view) {
|
var total = $(".flipbook").turn("pages"); //总页数
|
if (page !== 1) {
|
$(".previousPage").css("display", "block");
|
}
|
if (page == total) {
|
$(".nextPage").css("display", "none");
|
}
|
if (page !== total) {
|
$(".nextPage").css("display", "block");
|
}
|
},
|
turned: function (e, page, view) {
|
var total = $(".flipbook").turn("pages"); //总页数
|
if (page == 1) {
|
$(".previousPage").css("display", "none");
|
}
|
if (page == total) {
|
$(".nextPage").css("display", "none");
|
}
|
},
|
},
|
});
|
}
|
yepnope({
|
test: Modernizr.csstransforms,
|
yep: ["js/turn.js"],
|
complete: loadApp,
|
});
|
//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 = $('<div class=" g-plugin-confirm">');
|
// var dom1 = $('<div>').appendTo(dom);
|
// var dom_content = $('<div>').html(o.title).appendTo(dom1);
|
// var dom_btn = $('<div>').appendTo(dom1);
|
// 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("click", function () {
|
var pageCount = $(".flipbook").turn("pages"); //总页数
|
var currentPage = $(".flipbook").turn("page"); //当前页
|
if (currentPage >= 2) {
|
$(".flipbook").turn("page", currentPage - 1);
|
} else {
|
}
|
});
|
// 下一页
|
$(".nextPage").bind("click", 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', 1); //跳转页数
|
}, function () {
|
});
|
});
|
</script>
|
<!-- <script type="text/javascript" src="js/main.js"></script> -->
|
</body>
|
|
</html>
|
