admin管理员组文章数量:1023242
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 . 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?
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=".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>
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./#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?
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./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>
1 Answer
Reset to default 0You can change the size of the pages by using own-size as a CSS class and defining a custom size for the pages. See this page.
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 . 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?
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=".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>
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./#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?
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./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>
1 Answer
Reset to default 0You can change the size of the pages by using own-size as a CSS class and defining a custom size for the pages. See this page.
本文标签： javascriptMaking a Turnjs book like in exampleStack Overflow
版权声明：本文标题：javascript - Making a Turn.js book like in example? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745597252a2158244.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论