首页
所有分类
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 短路法代码精简
Aug 20 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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
反向代理(2) 生成缩略图(1) 二级域名(1) 前后端分离(1) 压力测试(1) 443(1) 默认端口(3) shell(3) 防盗链(1) reload(1)
You might like
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
js对象基础实例分析
2015/01/13 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
python表格存取的方法
2018/03/07 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
N.Peal官网：来自伦敦的高档羊绒品牌
2018/10/29 全球购物
澳大利亚最早和最古老的巨型游戏专家：Yardgames
2020/02/20 全球购物
化妆品促销方案
2014/02/24 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
教师党员个人总结
2015/02/10 职场文书
财务会计求职信范文
2015/03/20 职场文书
留学推荐信中文范文
2015/03/26 职场文书
生死抉择观后感
2015/06/09 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python