如何更改turnjs页面的高度

Question

这里我使用的是turn js翻转库，我想改变turn js页面的高度。这里使用客户端高度来计算页面的高度。现在我需要将页面的高度更改为700px。我该怎么做呢？

<script type='text/javascript'>
    (function () {
        'use strict';
        var module = {
            ratio: 1.38,
            init: function (id) {
                var me = this;
                if (document.addEventListener) {
                    this.el = document.getElementById(id);
                    this.resize();
                    this.plugins();
                    window.addEventListener('resize', function (e) {
                        var size = me.resize();
                        $(me.el).turn('size', size.width, size.height);
                    });
                }
            },
            resize: function () {
                this.el.style.width = '';
                this.el.style.height = '';
                var width = this.el.clientWidth,
                height = Math.round(width / this.ratio),
                padded = Math.round(document.body.clientHeight * 0.9);  
                if (height > padded) {
                    height = padded;
                    width = Math.round(height * this.ratio);
                }
                this.el.style.width = width + 'px';
                this.el.style.height = height + 'px';
                return {
                    width: width,
                    height: height
                };
            },
            plugins: function () {
                $(this.el).turn({
                    gradients: true,
                    acceleration: true
                });
                document.body.className = 'hide-overflow';
            }
        };
        module.init('book');
    }());
</script>

html：

<div class="t">
    <div class="tc rel">
        <div class="book" id="book">    
            <div class="page page1">
                <img src="image600x650.png">
            </div>
        </div>
    </div>
</div>

Answer 1

您已经拥有了website上的所有信息。你必须这样做：

$("flipbook").height(700);

Answer 2

下面是料盒高度500px和宽度992px函数loadApp() {)的代码

    flipbook.turn({

        // Magazine width

        width: 922,

        // Magazine height
        // Modify below height as you need

        height: 500,

    }

});

并根据需要修改magazine.css / add样式，如下所示设置高度

.magazine-viewport .container{
    width:922px;
    height:500px;
}

.magazine-viewport .magazine{
    width:922px;
    height:500px;
}

 .magazine-viewport .page{
    width:922px;
    height:500px;
}
.magazine-viewport .next-button,
.magazine-viewport .previous-button{
    width:22px;
    height:500px;
}

Answer 3

在main.js中

function loadApp() {

$('#canvas').fadeIn(1000);

var flipbook = $('.magazine');

// Check if the CSS was already loaded

if (flipbook.width()==0 || flipbook.height()==0) {
    setTimeout(loadApp, 10);
    return;
}

// Create the flipbook

flipbook.turn({

        // Magazine width

        // width: 922,
        width: 1245,

        // Magazine height

        // height: 600,
        height: 810,

        // Duration in millisecond

        duration: 1000,

        // Hardware acceleration

        acceleration: !isChrome(),

        // Enables gradients

        gradients: true,

        // Auto center this flipbook

        autoCenter: true,

        // Elevation from the edge of the flipbook when turning a page

        elevation: 50,

        // The number of pages

        pages: 12,

        // Events

        when: {
            turning: function(event, page, view) {

                var book = $(this),
                currentPage = book.turn('page'),
                pages = book.turn('pages');

                // Update the current URI

                Hash.go('page/' + page).update();

                // Show and hide navigation buttons

                disableControls(page);


                $('.thumbnails .page-'+currentPage).
                    parent().
                    removeClass('current');

                $('.thumbnails .page-'+page).
                    parent().
                    addClass('current');



            },

            turned: function(event, page, view) {

                disableControls(page);

                $(this).turn('center');

                if (page==1) { 
                    $(this).turn('peel', 'br');
                }

            },

            missing: function (event, pages) {

                // Add pages that aren't in the magazine

                for (var i = 0; i < pages.length; i++)
                    addPage(pages[i], $(this));

            }
        }

});