0
我試圖加入HTML5 翻書效果我已經創建了一個網頁和硬覆蓋，但問題的一些div標籤是「硬」的div不工作，因爲他們應該像我無法翻動硬頁。使用turn.js的
我有這個代碼：
<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