代码之家 › 专栏 › 技术社区 › The Garrus

使用javascript调整滑块大小

height header javascript

0

The Garrus · 技术社区 · 8 年前

当前代码:

cover_height: function() {

        if (!$('.typology-cover-empty').length) {

            var cover_height = $(window).height() - this.settings.admin_bar_height + Math.abs(parseInt($('.typology-section:first').css('top'), 10));
            var cover_content_height = $('.cover-item-container').height();
            var header_height = $('#typology-header').height();
            var cover_auto = true;

            if (cover_height < 450) {
                cover_height = 450;
            }

            if (cover_content_height > cover_height - header_height) {
                cover_height = cover_content_height + header_height + 100;
                cover_auto = false;
            }


            if ($(window).width() <= 1366) {

                this.settings.cover_height = cover_height;
                $('.typology-cover-item').css('height', cover_height);
                $('.typology-cover').css('height', cover_height);

            } else {
                $('.typology-cover-item').css('height', $('.typology-cover').height());
                $('.typology-cover').css('height', $('.typology-cover').height());
                this.settings.cover_height = $('.typology-cover').height();
            }

            if (cover_auto) {
                if (!$('.typology-cover-slider').length) {
                    $('.typology-cover-item').css('position', 'fixed');
                } else {
                    $('.typology-slider-wrapper-fixed').css('position', 'fixed');
                }
            }

        }
    },

为了降低滑块的高度,我必须更改什么? 如果你去这个网站,你会看到它真的很大。该网站是审查基本上,这会根据上面的代码调整大小。但我想把它缩小一些。

2 回复 | 直到 8 年前

1

Nils Fett 8 年前

滑块高度由此脚本计算。计算取决于窗口高度和滑块内容的高度。我认为设置滑块的固定高度不是一个好主意。如果这样做,您将失去滑块的响应能力。

下面是滑块高度的设置:

    if ($(window).width() <= 1366) {

        this.settings.cover_height = cover_height;// this variable contains the calculated height if the windows width is lower than 1366
        $('.typology-cover-item').css('height', cover_height);// Here the sliders Elements are set to the calculated height if the windows width is lower than 1366
        $('.typology-cover').css('height', cover_height);// Here the sliders Elements are set to the calculated height if the windows width is lower than 1366

    } else {
        $('.typology-cover-item').css('height', $('.typology-cover').height());// if windows width is greater than 1366 sliders Elements are set to its "natural height"
        $('.typology-cover').css('height', $('.typology-cover').height());
        this.settings.cover_height = $('.typology-cover').height();// if windows width is greater than 1366 sliders Elements are set to its "natural height"
    }

您可以这样做来降低高度:

    var reduceHeightValue = 50;
    if ($(window).width() <= 1366) {

        this.settings.cover_height = cover_height - reduceHeightValue;// reduce the height by 50 if windows width is lower than 1366
        $('.typology-cover-item').css('height', cover_height);// Here the sliders Elements are set to the calculated height if the windows width is lower than 1366
        $('.typology-cover').css('height', cover_height);// Here the sliders Elements are set to the calculated height if the windows width is lower than 1366

    } else {
        $('.typology-cover-item').css('height', $('.typology-cover').height() - reduceHeightValue);// reduce the height by 50 if windows width is greater than 1366
        $('.typology-cover').css('height', $('.typology-cover').height() - reduceHeightValue);// reduce the height by 50 if windows width is greater than 1366
        this.settings.cover_height = $('.typology-cover').height() - reduceHeightValue;// reduce the height by 50 if windows width is greater than 1366
    }

这种黑客可以为您工作,但大多数情况下,以这种方式更改现有代码不是一个好主意,因为它会破坏某些东西。显然,此滑块有一些可以设置高度的设置。我建议使用此设置。阅读滑块的文档并以适当的方式设置高度。

2

0

Nils Fett 8 年前

尝试以下操作:

cover_height: function() {

    if (!$('.typology-cover-empty').length) {

        var cover_height = $(window).height() - this.settings.admin_bar_height + Math.abs(parseInt($('.typology-section:first').css('top'), 10));
        var cover_content_height = $('.cover-item-container').height();

        $('#typology-header').height(150);// Set the height in pixel
        var header_height = $('#typology-header').height();
        var cover_auto = true;

        if (cover_height < 450) {
            cover_height = 450;
        }

        if (cover_content_height > cover_height - header_height) {
            cover_height = cover_content_height + header_height + 100;
            cover_auto = false;
        }


        if ($(window).width() <= 1366) {

            this.settings.cover_height = cover_height;
            $('.typology-cover-item').css('height', cover_height);
            $('.typology-cover').css('height', cover_height);

        } else {
            $('.typology-cover-item').css('height', $('.typology-cover').height());
            $('.typology-cover').css('height', $('.typology-cover').height());
            this.settings.cover_height = $('.typology-cover').height();
        }

        if (cover_auto) {
            if (!$('.typology-cover-slider').length) {
                $('.typology-cover-item').css('position', 'fixed');
            } else {
                $('.typology-slider-wrapper-fixed').css('position', 'fixed');
            }
        }

    }
},