javascript - Making a Turn.js book like in example? - Stack Overflow|江阴雨辰互联

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>

Share Improve this question asked Sep 18, 2014 at 13:12 Akairyuu 611 gold badge2 silver badges6 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 0

You 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.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745597254a4635189.html

javascript - Making a Turn.js book like in example? - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Making a Turn.js book like in example? - Stack Overflow

1 Answer 1

相关推荐