这篇文章主要为大家详细介绍了Turn.js实现很棒的翻书效果,对Turn.js翻书效果的实现进行总结,感兴趣的小伙伴们可以参考一下
最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用 fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想,后来想起自己曾经做过PC版的翻书效果,当时使用的是Turn.js ,查过其相关API后,整个人突然豁然开朗呀,使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀。现在将个人的学习总结如下,若有不正确的地方,欢迎读者给与批评指正!
Turn.js的官方网址: http://www.turnjs.com/
下面是我这个项目上线后的效果:
看过实际项目后,各位看官是不是已经迫不及待的想知道这个项目是如何实现,看官莫急,接下来我就详细的介绍下我的开发过程:
1、需要引入的脚本文件
2、html部分代码
Turn.js 实现翻书效果
3、主要js实现部分
/** * Created by ChengYa on 2016/6/18. */ //判断手机类型 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-600", "./image/0002.jpg-600", "./image/0003.jpg-600", "./image/0004.jpg-600", "./image/0005.jpg-600", "./image/0006.jpg-600", "./image/0007.jpg-600", "./image/0008.jpg-600", "./image/0009.jpg-600", "./image/0010.jpg-600", "./image/0011.jpg-600", "./image/0012.jpg-600", "./image/0013.jpg-600", "./image/0014.jpg-600", "./image/0015.jpg-600", "./image/0016.jpg-600", "./image/0017.jpg-600", "./image/0018.jpg-600", "./image/0019.jpg-600", "./image/0020.jpg-600", "./image/0021.jpg-600", "./image/0022.jpg-600", "./image/0023.jpg-600", "./image/0024.jpg-600", "./image/0025.jpg-600", "./image/0026.jpg-600", "./image/0027.jpg-600", "./image/0028.jpg-600", "./image/0029.jpg-600", "./image/0030.jpg-600", "./image/0031.jpg-600", "./image/0032.jpg-600", "./image/0033.jpg-600", "./image/0034.jpg-600", "./image/0035.jpg-600", "./image/0036.jpg-600", "./image/0037.jpg-600", "./image/0038.jpg-600", "./image/0039.jpg-600", "./image/0040.jpg-600", "./image/0041.jpg-600", ]; //加载页面 function loading() { var numbers = 0; var length = loading_img_url.length; for (var i = 0; i
4、最终实现结果
注:图片是从网上随便下载的,所以图片的尺寸不规范,导致在手机上浏览时图片不是很完整【不是因为代码写的有问题哦】 !!! 代码打包中没有加入真实项目中的图片,如需看到最佳的效果,建议图片尺寸设计为:750*1217,由于个人的时间和精力有限,我写的这个Demo使用的图片就没有将图片一一修改为750*1217的尺寸。
源码下载:http://xiazai.0133.cn/201606/yuanma/Turn.js-fanshu(0133.cn).rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持html中文网。