书翻页turn.js踩的坑

用的例子在这里：https://www.jq22.com/jquery-info2534
如果英文好的也可以直接去官网看文档

最简单的使用方法就是直接替换里面的图片，然后分享一下遇到的坑：

• 会有底部导航栏

翻页时会改变地址栏，唤出微信自带的跳转页面出现的底部白色导航栏

• 与jq的一些动画 ：animate() 方法 冲突

由翻书唤起的底部导航栏出现后，animate方法会与正常的有偏差，解决办法就是写css动画，然后用js增删class名

• 单双页

turn函数里面有一个display，single是单页，double是双页

• 修改页数

turn函数里面的pages

• 引入的js文件路径

在js里面最下面有一个yepnope({})，里面的文件路径是相对于html文件的（或者写绝对路径）

• 修改图片路径

需要修magazine.js里3个function ：loadPage+loadLargePage+loadSmallPage

• 双页直接跳到第二页

turn函数里面的page改变，如果不好使请看下一行
$(’.magazine’).turn(‘page’, 2);
如果再不好使就搜索下【.turn(‘page’,】，然后看看例子怎么写的跳转，可能会变一下前面的magazine

• 双页直接跳到第二页会出现翻页的过程，不想要这个过程

我没有找到屏蔽这个过程的方法
目前用的方法就是在翻书之前，就让它出现翻一下，这时候的opacity为0，再隐藏，opacity改回1。
等之后再显示这个页面的时候，就不会有第一遍翻页的那个过程了

• 取消点击放大效果

注释掉js里面的这几行就好了：

// if ($.isTouch)
// $(’.magazine-viewport’).bind(‘zoom.doubleTap’, zoomTo);
// else
// $(’.magazine-viewport’).bind(‘zoom.tap’, zoomTo);

• 缺少json文件
  

路径在magazine.js里面的loadRegions中更改，因为我不需要对应的json（虽然不知道里面是什么，但没有也可以正常运行），所以直接在loadPage函数里找到调用loadRegions那一行，注释掉就好了

• 背景图、箭头等图片路径

在magazine.css里面改变即可