Question

这里我使用转js翻转库，我想改变turnjs页面的高度。这里是使用客户端高度计算页面高度。现在我需要改变页面的高度让我们说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的代码 function loadApp（）{

    flipbook.turn({

        // Magazine width

        width: 922,

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

        height: 500,

    }

});

并修改magazine.css /添加样式，如下所示设置高度

.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));

            }
        }

});

Answer 4

最简单，只是改变'比例'... 1等宽X高，2是双高，1.5是高度比例。 600x650的比率为1.083。

如何更改turnjs页面的高度

4 个答案: