移动端turn.js挖坑总结

【1】高版本的jquery会导致turning的过程中page溢出半屏。

正确版本：

<script   src="jquery.min.1.7.js"></script>

【2】可通过css修改翻书的底部颜色及其透明度，默认为transparent。

.flipbook .page{background-color: /*底部色*/
}

【3】在turn.js的源文件2734行通过修改x,y的值可调整peel的大小与角度。

flipMethods._showFoldedPage.call(this,{corner: corner,x: point.x,y: point.y
},animate
);

【4】禁止touchmove虽然可以避免苹果手机页面上下滑动的问题，超过一屏距离时，通过e.preventDefault()/e.stoppropagation()来回切换，即使加了-webkit-overflow-scrolling:touch也非常影响用户体验。
目前我的解决方案是在**.page容器设置over-flow:auto/hidden**来解决超过一屏滑动。弊端是ios的页面滑动的问题还是存在。

【5】配置文件：

yepnope({test: Modernizr.csstransforms,yep: ['js/turn.js'],nope: ['js/turn.html4.min.js'],// cssboth: ['css/basic.css'],complete: loadApp
})

basic.css自己编写即可，不需使用原有的示例文件。

【6】 acceleration:true;移动端加速。

移动端turn.js挖坑总结相关推荐

js常用插件(九)之移动端翻书效果turn.js
js常用插件之turn.js-modernizr翻书效果欢迎点击: 个人官网博客首先引入必要的三个文件 <link rel="stylesheet" href=" ...
前端Vue书籍翻页功能利用turn.js来完成以及知识点(源码)
目录下载文档开始构造方法可配置项方法语法事件两种方式添加事件自动翻页loading加载功能案例 CSS basic.css源码如下 JS里面代码太多了,直接官网下载 index. ...
VUE翻书效果（turn.js，仿真折角过渡）
1.效果图 2.turn.js下载 http://www.turnjs.com/http://www.turnjs.com/ 3.安装JQ turn.js依赖JQ库,安装JQ,vue工程安装JQ np ...
turn.js 翻书效果
turn.js 实现翻书效果,自适应pc端.手机端.ipad,可以左右滑动翻页 <!doctype html> <!--[if lt IE 7 ]> <html lang ...
swiper 在turn.js不能滚动
这个问题,使用turn.js的同学一定遇到过,那怎么解决呢? 答案: 翻到对应包含swiper 的那页,重新初始化swiper 假设这个是第3页 <div class="page-co ...
vue引入turn.js
github地址: https://github.com/blasten/turn.js (1) 首先要全局引入jquery 这里我们使用vue-cli3 搭建的项目,所以使用链式引入 vue.con ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
移动端报表JS开发示例--获取定位
上次分享了移动端报表JS开发的系统概念,后来我又回去摸索了一些案例.之前接触到的FineReport的APP客户端可以用来打卡签到,就好奇研究了以下,这次就来聊一聊报表移动端开发如何实现定位功能. 1 ...
turn.js学习手册
因为最近用到turn来做一个比赛,所以学习了一下,但是现在没有中文的API文档,所以就自己整理了一下 1.flipbook的部署 1)引入jquery以及turn的js库 2)写入Html <d ...

移动端turn.js挖坑总结

移动端turn.js挖坑总结相关推荐

最新文章

热门文章