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 に答える