javascript 像示例中那样制作 Turn.js 书？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25913634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a Turn.js book like in example?
提问by Akairyuu
I'm currently making a book with turn.js using Jquery of which is going well but I need a little bit of help. You see I'm trying to make a hard-backed journal-type book like the example shown here http://www.turnjs.com/#samples/html5/1. My question is, how can I get it so that the pages of the book are smaller than the front and back covers? Also how can I get it so that when I keep turning the pages, the number of pages visibly build up on the other side like in the example?
我目前正在使用 Jquery 用 turn.js 制作一本书，其中进展顺利，但我需要一点帮助。你看，我正在尝试制作一本像http://www.turnjs.com/#samples/html5/1 中显示的例子那样的硬背日记类型的书。我的问题是，我怎样才能让书的页数小于封面和封底？另外我怎样才能得到它，以便当我继续翻页时，页数明显地堆积在另一侧，如示例中所示？
Can someone please help edit the code of my main page below so that I can get the effect I'm after?
有人可以帮助编辑我下面主页的代码，以便我可以获得我想要的效果吗？
<!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>
回答by Nischaal Cooray
You can change the size of the pages by using own-sizeas a CSS class and defining a custom size for the pages. See this page.
您可以通过使用own-sizeCSS 类并为页面定义自定义大小来更改页面的大小。请参阅此页面。
