15

我正在使用 Builtbywill 翻书。

<div id="mybook">
    <div title="This is a page title"> 
       <img src="image1.jpg"/>
    </div>
    <div> 
       <img src="image2.jpg"/>
    </div>
    <div title="This is another title"> 
        <img src="image3.jpg"/>
    </div>
    <div> 
      <img src="image4.jpg"/>
    </div>       
    <div> 
       <img src="image5.jpg"/>
    </div>
</div>

jQuery

  $(function() {
    $('#mybook').booklet({
        menu: '#custom-menu',
        pageSelector: true
    });
});

是否可以使用 Jquery 或其他方式直接将 PDF 上传到动画书，而不是使用图像？请帮助我。我正在使用http://builtbywill.com/code/booklet插件。

4

5 回答 5

15

Why not try

Take a look here, pdfjs + turnjs: http://www.maxims6n.bget.ru/pdf_books/demo_21.html

turn.js :http://www.turnjs.com/

pdf.js : http://mozilla.github.io/pdf.js/

jsPDF : http://parall.ax/products/jspdf

于 2013-11-08T07:45:06.713 回答
14

这是有关使用 turn.js 和 pdf.js 创建 pdf 翻书的问题。你会在这里得到一个例子。pdf.js 和 turn.js 之间的胶水文件可以在这里找到。很可能他修改了问题中所述的 pdf.js 库。所以请注意这一点。

于 2013-11-14T13:21:53.587 回答
2

If you want to create your own flipbook using jquery.

Register on this website Link and download the setup and create your own jquery flipbook. Try it.

于 2013-11-08T07:45:25.840 回答
1

现在可以使用DFlip jQuery Flipbook 插件。您可以仅使用 PDF 链接创建翻书，此外它还支持用于 3D 的 WebGl。

var flipBook;
jQuery(document).ready(function () {

    //when using source from online(make sure the file has CORS access enabled if used in cross domain)
    var pdfFileURL="example-assets/books/alice.pdf";
    var options = {hard:'cover',webgl:true,height: 500, duration: 800};

    flipBook = $("#flipbookContainer").flipBook(pdfFileURL, options);

});

随着最近的改进，现在只需使用 HTML 标签即可轻松创建 PDF 翻书。HTML 会自动解析，并且可以使用翻书。

 <div class="_df_button" source="example-assets/books/intro.pdf" id="df_intro_button">Intro Book</div>
 <div class="_df_thumb" source="example-assets/books/intro2.pdf" id="df_intro2_thumb" tags="3d,images" thumb="example-assets/books/thumbs/intro2.jpg">Intro 2</div>
于 2016-08-07T07:14:57.477 回答
1

使用这个库，您可以使用 jquery 将 PDF 转换为翻书。它就像包含库并在指向 pdf 文件的链接上调用插件一样简单。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://pdf-to-flipbook.codingfocus.com/release/jquery.pdfflipbook.1.js"></script>

<script>$('a').pdfFlipbook();</script>
于 2017-04-12T13:45:05.033 回答