jqueryでブラウザサイズ変更トリガーイベントを追加する方法-フロントエンドQ&A-php.cn

jqueryでブラウザサイズ変更トリガーイベントを追加する方法

WBOY

リリース： 2022-01-14 11:59:06

オリジナル

2017 人が閲覧しました

jquery では、resize メソッドを使用してブラウザサイズ変更トリガーイベントを追加できます。このメソッドの機能は、ブラウザウィンドウのサイズが変更されたときにサイズ変更イベントを生成するか、実行する関数を指定することです。サイズ変更イベントが発生したとき。構文は「$(selector).resize()」です。

jqueryでブラウザサイズ変更トリガーイベントを追加する方法

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery でブラウザサイズ変更トリガーイベントを追加する方法

ブラウザウィンドウのサイズが変更されると、resize イベントが発生します。

resize() メソッドは、サイズ変更イベントをトリガーするか、サイズ変更イベントの発生時に実行する関数を指定します。

サイズ変更イベントをトリガーする

構文

$(selector).resize()

ログイン後にコピー

関数をサイズ変更イベントにバインドする

構文

$(selector).resize(function)

ログイン後にコピー

function オプション。サイズ変更イベントが発生したときに実行する関数を指定します。

例は次のとおりです:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
$(document).ready(function(){
$(window).resize(function() {
  $("span").text(x+=1);
});
});
</script>
</head>
<body>
<p>窗口大小被调整过 <span>0</span> 次。</p>
<p>请试着重新调整浏览器窗口的大小。</p>
</body>
</html>

ログイン後にコピー

出力結果:

jqueryでブラウザサイズ変更トリガーイベントを追加する方法