移动端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'],
	// css
	both: ['css/basic.css'],
	complete: loadApp
})

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

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

你可能感兴趣的:(移动端turn.js挖坑总结)