移动端H5开发 Turn.js实现很棒的翻书效果

前端之家收集整理的这篇文章主要介绍了移动端H5开发 Turn.js实现很棒的翻书效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用 fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想,后来想起自己曾经做过PC版的翻书效果,当时使用的是,查过其相关API后,整个人突然豁然开朗呀,使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀。现在将个人的学习总结如下,若有不正确的地方,欢迎读者给与批评指正! Turn.js的官方网址: 下面是我这个项目上线后的效果

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

1、需要引入的脚本文件

2、html部分代码

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <Meta name="viewport" content="width=device-width,initial-scale=1.0,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"/> Turn.js 实现翻书<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>

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%">

';
} 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%">
';
} else {
tagHtml += ' <div style="background:url(image/00' + (i < 10 ? '0' + i : i) + '.jpg) center top no-repeat;background-size:100%">
';
}
}
$(".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: 50,display: 'single',// Enable gradients
gradients: true,// Auto center this flipbook
autoCenter: true,when: {
turning: function (e,page,view) {
if (page == 1) {
$(".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() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate

  • "" + date.getHours() + seperator2 + date.getMinutes()
  • seperator2 + date.getSeconds();
    return currentdate;
    }

4、最终实现结果

注:图片是从网上随便下载的,所以图片的尺寸不规范,导致在手机上浏览时图片不是很完整

【不是因为代码写的有问题哦】

!!! 代码打包中没有加入真实项目中的图片,如需看到最佳的效果,建议图片尺寸设计为:750*1217,由于个人的时间和精力有限,我写的这个Demo使用的图片就没有将图片一一修改为750*1217的尺寸。

源码下载:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/47763.html

猜你在找的JavaScript相关文章