如何增加在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中的页面数量

回答

相关问题