Question

我正在使用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>

Answer 1

您可以使用own-size作为CSS类并为页面定义自定义大小来更改页面大小。 See this page

像示例一样制作Turn.js书？

1 个答案: