12

ログインボックスを垂直方向に配置するために小さなjavascriptとjqueryを使用するログインページを作成しています。

また、resize（）で、ボックスを再び中央に配置するイベントがあります。

しかし、resize（）を使用すると、ユーザーがウィンドウのサイズを変更するたびに関数が起動され、これは一種の醜いです:)）

だから、垂直方向のサイズ変更でのみ関数を起動する方法があるかどうか知りたいです。

ありがとうございました

4

4 に答える 4

25

毎回起動しますが、幅を追跡して垂直方向のサイズ変更のみを確認できます。

// track width, set to window width
var width = $(window).width(); 
// fire on window resize
$(window).resize(function() {
    // do nothing if the width is the same
    if ($(window).width()==width) return; 
    // update new width value
    width = $(window).width();
    // ... your code
});
于 2012-10-27T02:00:29.003 に答える
3

垂直方向のサイズ変更を検出する各状況の高さを比較する代わりに、次のように水平方向と垂直方向のサイズ変更の再利用可能なイベントを作成できます。

// Horizontal and vertical window resize events.
(function () {
    var win = jQuery(window),
        prev_width = win.width(),
        prev_height = win.height();
    win.on('resize', function () {
        var width = win.width(),
            height = win.height();

        if (width !== prev_width) {
            win.trigger('hresize');
        }
        if (height !== prev_height) {
            win.trigger('vresize');
        }

        prev_width = width;
        prev_height = height;
    });
})();

そうすれば、そのコードを一度その場にドロップしてから、次のようなイベントを使用できます。

$(window).on('hresize', function () {
    // handle horizontal resizing
});

$(window).on('vresize', function () {
    // handle vertical resizing
});
于 2018-07-24T17:00:03.800 に答える
2

より良い解決策を得ました：

$('#element').resizable({
    stop: function( event, ui ) {
        $('#element').height(ui.originalSize.height);
    }
});
于 2015-02-13T09:40:42.373 に答える
1

Doublesharpの有用な答えを補完するものとして：

私の場合、window.outerWidthうまく機能し、垂直方向のサイズ変更に対して安定していました。

確かに、私はいくつかの問題を抱えていました$(window).width()：それは（奇妙なことに！）私が垂直方向にサイズ変更しただけでもたまたま変更されました。

于 2017-07-20T14:00:55.070 に答える