Question

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

我使用Turn.js库，因为它无法运行。我无法使用eBook阅读器软件打开它。

这是我的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文件。就是这样。

任何帮助将不胜感激

Answer 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提供的。我不得不复制整个代码并将其粘贴到js部分中，这超出了stackoverflow文本限制

如何使用Turn.js将filp效果添加到epub页面？

1 个答案: