首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于Turn.js 实现翻书效果实例解析

Posted in Javascript onJune 20, 2016

最近项目经理我个项目练练手，其项目需求是要实现翻书效果，看到这个需求后，我真是懵了，这咋整，我可是java出身的啊，这个问题真是难住我了，后来有同事的指导，之前他曾经做过PC版的翻书效果，当时使用的是Turn.js ，查过其相关API后，整个人突然豁然开朗呀，使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀。下面小编把我的学习心得分享给大家，大家可以参考下

Turn.js的官方网址: http://www.turnjs.com/

下面是我这个项目上线后的效果：

基于Turn.js 实现翻书效果实例解析

看过实际项目后，各位看官是不是已经迫不及待的想知道这个项目是如何实现，看官莫急，接下来我就详细的介绍下我的开发过程：

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 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 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.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、最终实现结果

基于Turn.js 实现翻书效果实例解析

三水点靠木友情提醒大家需要注意事项：图片是从网上随便下载的，所以图片的尺寸不规范，导致在手机上浏览时图片不是很完整【不是因为代码写的有问题哦】 !!! 代码打包中没有加入真实项目中的图片，如需看到最佳的效果，建议图片尺寸设计为:750*1217，由于个人的时间和精力有限，我写的这个Demo使用的图片就没有将图片一一修改为750*1217的尺寸。

5、代码打包 下载

http://xiazai.3water.com/201605/yuanma/Turn.js 实现翻书效果(3water.com).rar

基于Turn.js 实现翻书效果实例解析

- Author -

陈亚

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
游览器中javascript的执行过程(图文)
May 20 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
bootstrap table之通用方法（ 时间控件，导出，动态下拉框， 表单验证 ，选中与获取信息）代码分享
Jan 24 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
js 获取经纬度的实现方法
Jun 20 #Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 #Javascript
JS作为值的函数用法示例
Jun 20 #Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 #Javascript
JS事件添加和移出的兼容写法示例
Jun 20 #Javascript
Javascript操作表单实例讲解（下）
Jun 20 #Javascript
jQuery获取多种input值的简单实现方法
Jun 20 #Javascript
SandBox(1) Windows Server 2022(3) Quartz(1) RestTemplate(1) Windows Server(4) K8s(1) calc(1) NTP(1) Hive(5) HttpClient(1)
You might like
初识Laravel
2014/10/30 PHP
php多重接口的实现方法
2015/06/20 PHP
最简单的js图片切换效果实现代码
2011/09/24 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
vue实现拖拽进度条
2021/03/01 Vue.js
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
python线程池threadpool使用篇
2018/04/27 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
python批量赋值操作实例
2018/10/22 Python
python爬虫超时的处理的实例
2018/12/19 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
使用python绘制温度变化雷达图
2019/10/18 Python
在Anaconda3下使用清华镜像源安装TensorFlow（CPU版）
2020/04/19 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
什么是View State？
2013/01/27 面试题
本科生个人求职自荐信
2013/09/26 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
公司员工检讨书
2014/02/08 职场文书
中国入世承诺
2014/04/01 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
2019七夕节祝福语36句，快来收藏吧
2019/08/06 职场文书
nginx搭建NFS网络文件系统
2022/04/14 Servers