基于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

Javascript 相关文章推荐
js 模拟气泡屏保效果代码
Jul 10 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
JavaScript字符串转数字的简单实现方法
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
You might like
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
php与js的区别是什么
2013/08/05 Javascript
js读取配置文件自写
2014/02/11 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
python列表去重的二种方法
2014/02/14 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
python实现简单名片管理系统
2018/11/30 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
python实现梯度下降法
2020/03/24 Python
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
幼儿园教师教学反思
2014/02/06 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
授权委托书范本
2014/04/03 职场文书
个人年终总结开头
2015/03/06 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
西游记读书笔记
2015/06/25 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python