我目前正在使用使用Jquery的turn.js编写书籍，进展顺利，但我需要一点帮助。您会看到我正在尝试制作一本精打细算的日记本类型的书，例如http://www.turnjs.com/#samples/html5/1所示的示例。我的问题是，我怎样才能使书的页数比封面和封底的小？另外，如何获得它，以便当我不断翻动页面时，如示例中所示，页面的数量明显地增加了？
有人可以帮忙编辑下面的主页代码，以便获得想要的效果吗？
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/turn.js"></script>
<style type="text/css">
body{
background:#ccc;
}
#magazine{
width:1002px;
height:773px;
}
#magazine .turn-page{
background-color:#ccc;
background-size:100% 100%;
}
</style>
</head>
<body>
<div id="magazine">
<div class="hard">A Book</div>
<div class="hard"></div>
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
<div>Page 4</div>
<div>Page 5</div>
<div>Page 6</div>
<div>Page 7</div>
<div>Page 8</div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$(window).ready(function() {
$('#magazine').turn({
display: 'double',
acceleration: true,
gradients: !$.isTouch,
elevation:50,
when: {
turned: function(e, page) {
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
});
});
$(window).bind('keydown', function(e){
if (e.keyCode==37)
$('#magazine').turn('previous');
else if (e.keyCode==39)
$('#magazine').turn('next');
});
</script>
</body>
</html>
最佳答案
您可以通过使用own-size作为CSS类并定义页面的自定义大小来更改页面的大小。 See this page。