Question

我正在尝试在HTML5中添加flipbook效果我已经为页面和硬封面创建了一些div标签，但问题是'硬'div不起作用，因为它们应该像我无法转动硬页。！

我有这个代码：

<html>
<head>
<!--
<style type="text/css">
body
{ overflow:hidden;}
#zoom-viewport
{

background:#E3EDFF;

}



#flipbook.shadow{
    -webkit-box-shadow: 0 4px 10px #666;
    -moz-box-shadow: 0 4px 10px #666;
    -ms-box-shadow: 0 4px 10px #666;
    -o-box-shadow: 0 4px 10px #666;
    box-shadow: 0 4px 10px #666;
}

#flipbook .page-wrapper{
   -webkit-perspective:2000px;
   -moz-perspective: 2000px;
   -ms-perspective: 2000px;
   perspective: 2000px;
}

#flipbook{

    background:#75A3FF;
transition:margin-left 1s;
    -webkit-transition:margin-left 1s;
    -moz-transition:margin-left 1s;
    -o-transition:margin-left 1s;
    -ms-transition:margin-left 1s;
    transition:margin-left 1s;
}
</style>

        -->

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="includes/Turn/turn.js"></script>


</head>


<body>
<div id="zoom-viewport"> 
<div id="flipbook" style="background-color:red;">
    <div class="hard"> Turn.js </div> 
    <div class="hard"></div>
    <div class="double"> Page 1 </div>
    <div class="double"> Page 2 </div>
    <div class="double"> Page 3 </div>
    <div class="double"> Page 4 </div>
    <div class="hard"></div>
    <div class="hard"></div>
</div>
</div>

<script type="text/javascript">

$("#flipbook").turn({width:800, height:500 , autoCenter:true}).bind("turning", function(event, page, view) {
    alert("Turning the page to: "+page);
});
</script>
</body>
</html>

请帮助解决此问题

提前致谢

Shumaila

Answer 1

有几件事需要检查。

您使用的是哪个版本的Turn.js？
您正在测试哪种浏览器？

似乎硬类直到第4版才发布。还有一个在IE9中使用硬类的错误，直到4.1.0版才能修复。

希望这有帮助，快速查看代码看起来非常像示例代码。

在html5中使用turn.js

1 个答案: