如何增加在turn.js的DOM中的頁面數量

Turn.js可以使用非常長的flipbooks。也就是說，關於它可以包含的頁面數量沒有限制。這是因爲 turn.js只保留在DOM中的最後6頁，不管書多長時間。仍然會引用先前加載的的內容，但可以減少緩存以便釋放內存到。如何增加在turn.js的DOM中的頁面數量

我想保留DOM中的前7個頁面。如何做到這一點？ pagesInDOM限制爲6，如turn.js中所定義。

HTML

<div id=」flipbook」> 
<div class=」hard」>Page 1</div> 
<div class=」hard」>Page 2</div> 
<div class=」hard」>Page 3</div> 
<div class=」hard」>Page 4</div> 
<div class=」hard」>Page 5</div> 
<div class=」hard」>Page 6</div> 
<div class=」hard」>Page 7</div> 
<div class=」hard」>Page 8</div> 
<div class=」hard」>Page 9</div> 
<div class=」hard」>Page 10</div> 
</div>

var oTurn = $('#flipbook').turn({ 
     width: 1700, 
     height: 850, 
     elevation: 50, 
     gradients: false, 
     autoCenter: true, 
     acceleration: true, 
     start: function (event, pageObject, corner) { 
      if (pageObject.next === 1) 
       event.preventDefault(); 
     }, 
     turning: function (event, page, view) { 
      if (page === 1) 
       event.preventDefault(); 
     } 
    });

來源

2015-10-16 HD..

在堆棧溢出，我們希望你自己去 - 無論是谷歌搜索或編寫一些代碼（甚至只是僞代碼）。你能告訴我們你先試過了什麼 - 這樣我們就不會重複你的努力（並向我們表明你已經付出了一些努力）？ –

增加了更多代碼 –

的pagesInDOM變量是硬編碼在turn.js，我還沒有找到一種方法，通過不同的值作爲turn.js延伸jQuery的。我想在實例化Turn時看到它作爲一個選項可用，但項目現在看起來已經死了。我找到的唯一解決方案是進入文件並手動爲其分配一個不同的值，在您的案例pagesInDOM = 7;。

這就是說，有在unminified版本只是聲明之上，指出註釋：

// Number of pages in the DOM, minimum value: 6 
pagesInDOM = 6,

我做了一些測試，當這本書已超過4頁，該值低於6，在範圍末尾的頁面不會被加載，當翻閱書本時你會發現空白頁。我相信這是由於範圍函數決定是否應該在翻頁時加載另一個頁面。

從turn.js：

// Returns a range of pages that should be in the DOM 
// Example: 
// - page in the current view, return true 
// * page is in the range, return true 
// Otherwise, return false 
// 1 2-3 4-5 6-7 8-9 10-11 12-13 
// ** ** -- ** ** 
range: function(page) { 
    var remainingPages, left, right, view, 
    data = this.data(); 
    page = page || data.tpage || data.page || 1; 
    view = turnMethods._view.call(this, page); 
    if (page<1 || page>data.totalPages) 
     throw turnError('"'+page+'" is not a valid page'); 
    view[1] = view[1] || view[0]; 
    if (view[0]>=1 && view[1]<=data.totalPages) { 
     remainingPages = Math.floor((pagesInDOM-2)/2); 
     if (data.totalPages-view[1] > view[0]) { 
      left = Math.min(view[0]-1, remainingPages); 
      right = 2*remainingPages-left; 
     } else { 
      right = Math.min(data.totalPages-view[1], remainingPages); 
      left = 2*remainingPages-right; 
     } 
    } else { 
     left = pagesInDOM-1; 
     right = pagesInDOM-1; 
    } 
    return [Math.max(1, view[0]-left), 
      Math.min(data.totalPages, view[1]+right)]; 
},

總之，pagesInDOM的turn.js值更改爲7，你應該能夠acheive您想要的結果。

來源

2016-09-15 13:42:12 Shaggy

如何增加在turn.js的DOM中的頁面數量

回答

相關問題