首页
所有分类
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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
JavaScript高级程序设计 阅读笔记（七） ECMAScript中的语句
Feb 27 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 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
三角函数(1) 优先队列(1) MyBatis(5) nacos(1) 迪杰斯特拉(1) Android Studio(4) Dijkstra(1) seata(1) exec(1) cv2(1)
You might like
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
ImageZoom 图片放大镜效果（多功能扩展篇）
2010/04/14 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
jquery图片滚动放大代码分享（2）
2015/08/28 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
Vue 兄弟组件通信的方法（不使用Vuex）
2017/10/26 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
[03:02]安得倚天剑，跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
python+matplotlib实现动态绘制图片实例代码（交互式绘图）
2018/01/20 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
Python 获取项目根路径的代码
2019/09/27 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
吉列剃须刀美国官网：Gillette美国
2018/07/13 全球购物
jurlique茱莉蔻英国官网：澳洲天然护肤品
2018/08/03 全球购物
Myprotein意大利官网：欧洲第一运动营养品牌
2018/11/22 全球购物
创建精神文明单位实施方案
2014/03/08 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
项目负责人岗位职责
2015/02/15 职场文书
mysql优化
2021/04/06 MySQL
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers