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

Question

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

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

这是我的Epub文件夹目录

之前

添加Turn.js库

After

添加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文件。就这样。

任何帮助将不胜感激

我有一个.epub文件，当用户在我使用Turn.js库的页面之间切换时，没有任何效果或动画，因为它不起作用。我无法使用eBook阅读器软件打开它。 ...

Answer 1

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

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

问题描述投票：6回答：1

1个回答

最新问题

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

问题描述 投票：6回答：1

1个回答

最新问题

问题描述投票：6回答：1