html - 在 TurnJs Flipbook 上动态放置大型 HTML 内容

Question

我不确定这是否已经被讨论过，我尝试搜索问题列表但找不到与之相关的任何内容。

我有大量 HTML 内容需要使用 turn.js 进行绑定(bind)。我遇到的问题是，使用 turn js，我必须将 HTML 拆分为单独的 div 标签作为页面。 turn.js 中有没有一种方法可以将内容绑定(bind)到 div 上，它会根据绑定(bind)的内容自动包装到不同的页面？

或者有没有办法知道需要将多少数据绑定(bind)到每个页面才能使这种情况正常工作。

Answer 1

这是一个将内容拆分为页面的解决方案，然后使用 turn.js 创建一本书。

这个解决方案的逻辑是检查下一个内容是否可以在当前页面中，或者我们需要创建一个新页面并将内容放在那里。

这段代码从特定的 div 中“读取”html 并施展魔法 ;)

此外，您可以使用 jsbin 中的代码.

var width = 400,
    height = 400,
    padding = 20;

// create a tester div. in this `div` we will put the contents and check if we need a new page
var div = $('<div />').css({
  // divide it by 2 because each page is half from the book
  width: width / 2
}).appendTo(document.body);

var index = 0;
var pages = [];
// get all content from the input html
var contents = $('#text').contents();

while (index < contents.length) {
  var content = contents.eq(index).clone();
  
  div.append(content);
  // check whether the contents exceed the page, if so, remove this content from the page
  if (div.height() > height) {
    content.remove();
    // create a new page
    pages.push(div.clone());
    // reset the tester div's html to check the next content
    div.html('');
  }
  // if this is the last content, push it to a new page and break
  else if (index == contents.length - 1) {
    pages.push(div.clone());
    div.remove();
    break;
  }
  // go to the next content
  else {
    index++;
  }
}

var book = $('#book');
for (var i = 0; i < pages.length; i++) {
  //book.after(pages[i].clone());
  //book.after('<hr />');
  book.append(pages[i]);
}

// init the plugin
book.turn({
  width: width,
  height: height,
  gradients: true, 
  acceleration: true
});

.sample-flipbook .page {
  line-height:1 !important;
  font-size:inherit !important;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://www.turnjs.com/lib/turn.min.js"></script>
<link href="http://www.turnjs.com/samples/basic/css/basic.css" rel="stylesheet" />

<div id="book" class="sample-flipbook"></div>

<div id="text">
  <p>Lorem ipsum dolor sit amet, sed probatus dissentias cu. Ex liber error vim. Habeo mollis cu qui, eu cum graeco scripta nostrum, est et delenit suscipit. Eius meliore iudicabit per in, pro numquam fabellas id.
  </p>
  <p>blablabla</p>
    <p>blablabla1</p>
    <p>blablabla2</p>
    <p>blablabla4</p>
    <p>blablabla5</p>
    <p>blablabla6</p>
    <p>blablabla7</p>
  <p>
Ponderum gubergren adversarium pri ad. Mea ne veri scribentur. Nam populo conclusionemque te. Ad albucius voluptatum vix, cum id dicta facilis petentium. His no rebum vivendo. Per esse illum nihil eu, eos affert ceteros ne.
  </p>
  <p>
At mea nostro oportere reprimique. Vim veri facilisi deterruisset in, maiorum referrentur id mea. Vel eligendi euripidis ullamcorper eu. Vix eu veri primis sententiae, sumo eligendi conclusionemque ad his. Ea quando luptatum rationibus eam, et dico aliquid eloquentiam his. Mea primis intellegebat ne, ea regione equidem ullamcorper usu.
  </p><p>
Mel in natum recusabo aliquando, tollit probatus qui in. Ex labore pertinax oportere ius, nobis iudico cu quo. Malis dicunt moderatius eum ex, quaeque consetetur duo ne. Ea veri inimicus mei, vim eu constituam consequuntur.
  </p>
  <p>
Per id ancillae efficiantur. Eam platonem recteque euripidis et. Usu tota dolore tibique id, id libris molestiae mel. Cu odio illud appareat mei. Quis vitae ne usu. Ut eos magna prima.</p>
    <p>Lorem ipsum dolor sit amet, sed probatus dissentias cu. Ex liber error vim. Habeo mollis cu qui, eu cum graeco scripta nostrum, est et delenit suscipit. Eius meliore iudicabit per in, pro numquam fabellas id.
  </p>
  <p>
Ponderum gubergren adversarium pri ad. Mea ne veri scribentur. Nam populo conclusionemque te. Ad albucius voluptatum vix, cum id dicta facilis petentium. His no rebum vivendo. Per esse illum nihil eu, eos affert ceteros ne.
  </p>
  <p>
At mea nostro oportere reprimique. Vim veri facilisi deterruisset in, maiorum referrentur id mea. Vel eligendi euripidis ullamcorper eu. Vix eu veri primis sententiae, sumo eligendi conclusionemque ad his. Ea quando luptatum rationibus eam, et dico aliquid eloquentiam his. Mea primis intellegebat ne, ea regione equidem ullamcorper usu.
  </p><p>
Mel in natum recusabo aliquando, tollit probatus qui in. Ex labore pertinax oportere ius, nobis iudico cu quo. Malis dicunt moderatius eum ex, quaeque consetetur duo ne. Ea veri inimicus mei, vim eu constituam consequuntur.
  </p>
  <p>
Per id ancillae efficiantur. Eam platonem recteque euripidis et. Usu tota dolore tibique id, id libris molestiae mel. Cu odio illud appareat mei. Quis vitae ne usu. Ut eos magna prima.</p>
  </div>

很重要的一点是，这个解决方案是您的一个方向。您最有可能需要添加更多代码来完全满足您的需求，但我为您完成了大部分工作。