用的例子在這里：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里面改變即可

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。