用的例子在這里：https://www.jq22.com/jquery-info2534
如果英文好的也可以直接去官網(wǎng)看文檔

最簡單的使用方法就是直接替換里面的圖片，然后分享一下遇到的坑：

• 會有底部導(dǎo)航欄

翻頁時(shí)會改變地址欄，喚出微信自帶的跳轉(zhuǎn)頁面出現(xiàn)的底部白色導(dǎo)航欄

• 與jq的一些動畫 ：animate() 方法 沖突

由翻書喚起的底部導(dǎo)航欄出現(xiàn)后，animate方法會與正常的有偏差，解決辦法就是寫css動畫，然后用js增刪class名

• 單雙頁

turn函數(shù)里面有一個(gè)display，single是單頁，double是雙頁

• 修改頁數(shù)

turn函數(shù)里面的pages

• 引入的js文件路徑

在js里面最下面有一個(gè)yepnope({})，里面的文件路徑是相對于html文件的（或者寫絕對路徑）

• 修改圖片路徑

需要修magazine.js里3個(gè)function ：loadPage+loadLargePage+loadSmallPage

• 雙頁直接跳到第二頁

turn函數(shù)里面的page改變，如果不好使請看下一行
$(’.magazine’).turn(‘page’, 2);
如果再不好使就搜索下【.turn(‘page’,】，然后看看例子怎么寫的跳轉(zhuǎn)，可能會變一下前面的magazine

• 雙頁直接跳到第二頁會出現(xiàn)翻頁的過程，不想要這個(gè)過程

我沒有找到屏蔽這個(gè)過程的方法
目前用的方法就是在翻書之前，就讓它出現(xiàn)翻一下，這時(shí)候的opacity為0，再隱藏，opacity改回1。
等之后再顯示這個(gè)頁面的時(shí)候，就不會有第一遍翻頁的那個(gè)過程了

• 取消點(diǎn)擊放大效果

注釋掉js里面的這幾行就好了：

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

• 缺少json文件
  

路徑在magazine.js里面的loadRegions中更改，因?yàn)槲也恍枰獙?yīng)的json（雖然不知道里面是什么，但沒有也可以正常運(yùn)行），所以直接在loadPage函數(shù)里找到調(diào)用loadRegions那一行，注釋掉就好了

• 背景圖、箭頭等圖片路徑

在magazine.css里面改變即可

總結(jié)

以上是生活随笔為你收集整理的书翻页turn.js踩的坑的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。