jqueryのresize()メソッド-フロントエンドQ&A-php.cn

jqueryのresize()メソッド

WBOY

リリース： 2023-05-28 10:24:09

オリジナル

1962 人が閲覧しました

jQuery は、Web ページ要素を簡単に操作できるようにする人気の JavaScript ライブラリです。このうち、resize() メソッドは、Web ページ要素のサイズの変更を追跡するために使用される jQuery の関数メソッドです。この記事では、読者が学習後、Web 開発の問題を解決するためにこのメソッドをより適切に適用できることを期待して、resize() メソッドの使用法と例について説明します。

1.size() メソッドの役割

jQuery では、resize() メソッドは主にウィンドウオブジェクトのサイズ変更をキャプチャし、対応する関数をトリガーして応答性を実現するために使用されます。デザインやその他のサイズ関連の操作。ウィンドウサイズが変更されると、このメソッドはバインドされた関数を自動的に実行し、ページコンテンツが適切に適応するようにします。

2.size() メソッドの使用

resize() メソッドを使用するには、まずウィンドウサイズ変更のイベントを処理する関数を確立する必要があります。この関数は、ウィンドウサイズが変更されると自動的にトリガーされます。次に、ページの読み込み時に、関数をパラメータとして渡して、resize() メソッドが呼び出されます。こうすることで、ウィンドウサイズが変更されるたびに、バインドされた関数が実行されます。このメソッドの構文は次のとおりです。

$(window).resize(function() {
//サイズ変更イベントを処理するコードはここにあります
});

このうち、$(ウィンドウ)はイベントがバインドされるオブジェクトを表します。このようにして、ウィンドウサイズが変更されたときに関数コードが自動的に実行されます。

3.size() メソッドの例

resize() メソッドの例をいくつか見てみましょう。ウィンドウサイズの変更に応じて変化する画像のコレクションを作成します。

1. グリッド状の画像コレクション

まず、グリッド状に配置する画像のセットを用意します。ウィンドウのサイズが変わると、各行に収容できる画像の数と各列に収容できる画像の数が変わります。

HTML 構造:

<div class="image-grid">
  <img src="image1.jpg" alt="image 1"/>
  <img src="image2.jpg" alt="image 2"/>
  <img src="image3.jpg" alt="image 3"/>
  <img src="image4.jpg" alt="image 4"/>
  <img src="image5.jpg" alt="image 5"/>
</div>

ログイン後にコピー

CSS スタイル:

.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.image-grid img {
  margin: 5px;
  max-width: 100%;
  height: auto;
}

ログイン後にコピー

JavaScript コード:

$(document).ready(function() {
  resizeImageGrid();
});

$(window).resize(function() {
  resizeImageGrid();
});

function resizeImageGrid() {
  var windowWidth = $(window).width();
  var imageSize = (windowWidth < 480) ? Math.floor(windowWidth / 2) : Math.floor(windowWidth / 4);
  $('.image-grid img').css({
    'width': imageSize + 'px',
    'height': imageSize + 'px'
  });
}

ログイン後にコピー

2. フェードインおよびフェードアウト画像コレクション

以下は、シンプルなフェードインおよびフェードアウトの画像コレクション表示です。ウィンドウサイズが変更されると、イメージコンテナーのサイズも変更されます。

HTML 構造:

<div class="fade-gallery">
  <div class="gallery-item active">
    <img src="image1.jpg" alt="image 1"/>
  </div>
  <div class="gallery-item ">
    <img src="image2.jpg" alt="image 2"/>
  </div>
  <div class="gallery-item ">
    <img src="image3.jpg" alt="image 3"/>
  </div>
  <div class="gallery-item ">
    <img src="image4.jpg" alt="image 4"/>
  </div>
  <div class="gallery-item ">
    <img src="image5.jpg" alt="image 5"/>
  </div>
</div>

ログイン後にコピー

CSS スタイル:

.fade-gallery {
  position: relative;
  height: 600px;
  overflow: hidden;
}

.gallery-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.gallery-item.active {
  opacity: 1;
}

.gallery-item img {
  max-width: 100%;
  height: auto;
}

ログイン後にコピー

JavaScript コード:

$(document).ready(function() {
  resizeFadeGallery();
});

$(window).resize(function() {
  resizeFadeGallery();
});

function resizeFadeGallery() {
  var windowHeight = $(window).height();
  $('.fade-gallery').css({
    'height': windowHeight + 'px'
  });
}

ログイン後にコピー

結論

この記事を通じて、次のことを学びました。 resize jQuery の () メソッドの使用例と例は、ウィンドウサイズが変更されたときに対応する関数を実行し、それによってページアダプテーションなどの目的を達成することです。同時に、実際のプロジェクトで使用できそうな例もいくつか見ましたので、読者の参考になれば幸いです。

以上がjqueryのresize()メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。