如何使用 Turn.js 为 epub 页面添加电影效果？答案

【问题标题】：How to add filp efect to epub pages using Turn.js?如何使用 Turn.js 为 epub 页面添加电影效果？
【发布时间】：2020-01-31 17:41:26
【问题描述】：

我有一个 .epub 文件，当用户在页面之间切换时，它没有任何效果或动画

我使用Turn.js图书馆因为它不起作用。我无法用电子书阅读器软件打开它。

这是我的 Epub 文件夹目录

之前添加 Turn.js 库

之后添加 Turn.js 库

这是我的 chap_0001.xhtml Html 代码

  <head>
    <title>How to Win Every Argument</title>
    <link href="style/style.css" rel="stylesheet" type="text/css"/>
	<meta name="viewport" content="width = 1050, user-scalable = no" /><!-- Added-->
	<script type="text/javascript" src="extras/jquery.min.1.7.js"></script><!-- Added -->
	<script type="text/javascript" src="extras/modernizr.2.5.3.min.js"></script><!-- Added-->
  </head>
  <body dir="auto">
  <h1 dir="ltr" class="center">How to Win Every Argument</h1><p dir="ltr" class="center bold">Madsen Piri</p>
  
 <div class="offset">
  <div class="flipbook-viewport"><!-- Added-->
	<div class="container"><!-- Added-->
		<div class="flipbook"><!-- Added-->

		<div style="width: 100.0%;">
		<img src="images/img_0001.png" alt="Picture #1"/>
		</div>
		<span xmlns:epub="http://www.idpf.org/2007/ops" id="1" title="1" epub:type="pagebreak"/>
		<div style="width: 37.238758708043065%;">
		<img src="images/img_0002.png" alt="Picture #2"/>
		</div>
		<span xmlns:epub="http://www.idpf.org/2007/ops" id="2" title="2" epub:type="pagebreak"/>
		<div style="width: 45.59848005066498%;">
		<img src="images/img_0003.png" alt="Picture #3"/>
		</div>
		
		<!-- rest of pages -->
	      </div>	
	  </div>	
   </div>	
  </div>

这是我的 chap_0001.xhtml Js 代码

<!-- language: lang-js -->
//Added after using Turn.js library
    function loadApp() {
      // Create the flipbook
      $('.flipbook').turn({
        // Width
        width: 922,
        // Height
        height: 600,
        // Elevation
        elevation: 50,
        // Enable gradients
        gradients: true,
        // Auto center this flipbook
        autoCenter: true

      });
    }

    // Load the HTML4 version if there's not CSS transform

    yepnope({
      test: Modernizr.csstransforms,
      yep: ['lib/turn.js'],
      nope: ['lib/turn.html4.min.js'],
      both: ['style/basic.css'],
      complete: loadApp
    });

我只复制库文件夹并更改 chap_0001.xhtml 文件。就是这样。

任何帮助将不胜感激

【问题讨论】：

你添加了 Jquery 吗？

标签： javascript jquery html epub turnjs

【解决方案1】：

我不确定您的脚本有什么特殊问题。一个主要问题是您在 html 中包含的额外跨度：

<span xmlns:epub="http://www.idpf.org/2007/ops" id="1" title="1" epub:type="pagebreak"/>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="2" title="2" epub:type="pagebreak"/>

它们被认为是“页面”，因此 turn.js 将页面变为与其他元素大小不同的空白跨度。

无论如何，这是一个适用于您的 html 的示例：JSFiddle Example

我无法在此处包含工作代码，因为 turn.js 是通过 http 提供的。我不得不复制整个代码并粘贴到超过stackoverflow文本限制的js部分

【讨论】：