<!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 href="css/magazine.css" rel="stylesheet" type="text/css">
<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/turn.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="fbToolBar" id="fbToolBar" style="background-color: rgb(68, 68, 68); transform: translate3d(0px, 0px, 0px);">
<div class="buttonBar" style="width: 100%;">
<div class="button dir">
<img style="pointer-events:none;" src="./image/fbPng/dire.png">
</div>
<div class="button reset">
<img style="pointer-events:none;" src="./image/fbPng/reset.png">
</div>
<div class="button pagenumber"></div>
<div class="button big">
<img style="pointer-events:none;" src="./image/fbPng/big.png">
</div>
<div class="button small">
<img style="pointer-events:none;" src="./image/fbPng/small.png">
</div>
</div>
</div>
<!-- 书的外边框 -->
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook"></div>
</div>
<!-- 目录 -->
<div id="ulDiv" style="display: none">
<ul>
<li>封面</li>
<li>图2</li>
<li>图3</li>
<li>图4</li>
<li>图5</li>
<li>图6</li>
<li>图7</li>
<li>图8</li>
<li>图9</li>
<li>图10</li>
<li>图11</li>
<li>图12</li>
<li>图14</li>
<li>底部</li>
</ul>
</div>
</div>
<script type="text/javascript">
// 加载图片
// 背景图片加载方式，注意路径
var loading_img_url = [
"./image/bg1.jpg",
"./image/bg2.jpg",
"./image/bg3.jpg",
"./image/bg4.jpg",
"./image/bg5.jpg",
"./image/bg6.jpg",
"./image/bg7.jpg",
"./image/bg8.jpg",
"./image/bg9.jpg",
"./image/bg10.jpg",
"./image/bg11.jpg",
"./image/bg12.jpg",
"./image/bg13.jpg",
"./image/bg14.jpg",
"./image/bg15.jpg",
"./image/bg16.jpg",
"./image/bg17.jpg",
"./image/bg18.jpg"
];
// page的值对应图片的顺序页面
var directory = [{
page: 1,
name: '封面'
}, {
page: 2,
name: '图2'
}, {
page: 3,
name: '图3'
}, {
page: 4,
name: '图4'
}, {
page: 5,
name: '图5'
}, {
page: 6,
name: '图6'
}, {
page: 7,
name: '图7'
}, {
page: 8,
name: '图8'
}, {
page: 9,
name: '图9'
}, {
page: 10,
name: '图10'
}, {
page: 11,
name: '图11'
}, {
page: 12,
name: '图12'
}, {
page: 14,
name: '图14'
}, {
page: 18,
name: '底部'
}]
</script>
<script type="text/javascript" src="js/main.js"></script>
<script>
//自定义弹出层
(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 = $('<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);
if ($(window).width() > 1024 && $(window).height() > 700) {
//上一页
$(".previousPage").bind("click", function() {
var pageCount = $(".flipbook").turn("pages"); //总页数
var currentPage = $(".flipbook").turn("page"); //当前页
if (currentPage > 2) {
$(".flipbook").turn('page', currentPage - 2);
} else if (currentPage == 2) {
$(".flipbook").turn('page', currentPage - 1);
}
});
// 下一页
$(".nextPage").bind("click", function() {
var pageCount = $(".flipbook").turn("pages"); //总页数
var currentPage = $(".flipbook").turn("page"); //当前页
if (currentPage < pageCount - 1) {
$(".flipbook").turn('page', currentPage + 2);
} else if (currentPage == pageCount - 1) {
$(".flipbook").turn('page', currentPage + 1);
}
});
} else {
//上一页
$(".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 {}
});
}
/*
* 底部按钮点击事件
* 目录点击
* 放大
* 缩小还原
*/
/*
* 目录点击
*/
$(".dir").bind("click", function() {
$("#ulDiv").css("display", "block");
});
$('ul li').click(function() {
$("#ulDiv").css("display", "none");
// console.log(this, '参数', $(this).text())
const dirText = $(this).text()
let index = 0
for (let i = 0, dirLen = directory.length; i < dirLen; i++) {
let dirItem = directory[i]
if (dirText === dirItem.name) {
index = dirItem.page
}
}
$(".flipbook").turn('page', index)
})
// 隐藏目录列表
$("#ulDiv").click(function() {
$("#ulDiv").css("display", "none");
})
/*
* 放大按钮点击
*/
$(".big").bind('click', function() {
var flipbookBox = $(".flipbook")
var flipWidth = flipbookBox.css('width').split('px')[0]
var flipHeight = flipbookBox.css('height').split('px')[0]
var maxWidth = window.screen.availWidth;
if (flipWidth < 2000) {
turn.js实现翻书效果
需积分: 25 46 浏览量
2021-04-13
12:09:55
上传
评论
收藏 3.47MB ZIP 举报
turn.zip （32个子文件） 
turn 
index.html 14KB
favicon.ico 4KB js main.js 10KB modernizr.2.5.3.min.js 8KB jquery.js 370KB turn.js 104KB image 
bg13.jpg 292KB bg16.jpg 79KB bg14.jpg 333KB bg18.jpg 4KB bg1.jpg 3KB bg17.jpg 780KB bg4.jpg 200KB bg7.jpg 145KB bg5.jpg 99KB bg10.jpg 46KB bg6.jpg 164KB bg8.jpg 45KB bg12.jpg 80KB bg2.jpg 45KB bg11.jpg 475KB bg9.jpg 364KB bg3.jpg 231KB fbPng 
next.png 886B reset.png 1KB small.png 2KB dire.png 241B pre.png 984B big.png 2KB bg15.jpg 69KB
btn.gif 6KB css basic.css 11KB
评论0