移动端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;移动端加速。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值