0

我正在尝试在 HTML5 中添加翻书效果我已经为页面和精装书创建了一些 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>

请帮忙解决这个问题

提前致谢

舒迈拉

4

1 回答 1

1

有几件事要检查。

  • 您使用的是哪个版本的 Turn.js？
  • 你测试的是什么浏览器？

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

希望这会有所帮助，快速查看代码看起来很像示例代码。

于 2013-01-21T20:52:35.323 回答