最近项目经理我个项目练练手，其项目需求是要实现翻书效果，看到这个需求后，我真是懵了，这咋整，我可是java出身的啊，这个问题真是难住我了，后来有同事的指导，之前他曾经做过PC版的翻书效果，当时使用的是Turn.js ，查过其相关API后，整个人突然豁然开朗呀，使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀。下面小编把我的学习心得分享给大家，大家可以参考下
下面是我这个项目上线后的效果：
看过实际项目后，各位看官是不是已经迫不及待的想知道这个项目是如何实现，看官莫急，接下来我就详细的介绍下我的开发过程：
1、需要引入的脚本文件
2、html部分代码
Turn.js 实现翻书效果
3、主要js实现部分
-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 += '
';
} else if (i == 41) {
tagHtml += '
';
} else {
tagHtml += '
';
}
}
$(".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,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、最终实现结果
编程之家友情提醒大家需要注意事项：
图片是从网上随便下载的，所以图片的尺寸不规范，导致在手机上浏览时图片不是很完整【不是因为代码写的有问题哦】 !!! 代码打包中没有加入真实项目中的图片，如需看到最佳的效果，建议图片尺寸设计为:750*1217，由于个人的时间和精力有限，我写的这个Demo使用的图片就没有将图片一一修改为750*1217的尺寸。5、代码打包 下载
实现翻书效果(jb51.cc).rar
原文地址：https://www.jb51.cc/js/47728.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
