HTML、CSS、jQuery を使用してレスポンシブな画像ギャラリーを作成する方法-jsチュートリアル-php.cn

HTML、CSS、jQuery を使用してレスポンシブな画像ギャラリーを作成する方法

王林

リリース： 2023-10-27 16:19:50

オリジナル

1381 人が閲覧しました

HTML、CSS、jQuery を使用してレスポンシブな画像ギャラリーを作成する方法

前書き:
モバイルデバイスの人気に伴い、レスポンシブデザインは現代的なものになりました。 Web デザインの重要な標準。この記事では、HTML、CSS、jQuery を使用してレスポンシブな画像ギャラリーを作成する方法について説明します。この画像ギャラリーを使用すると、さまざまなデバイス上でさまざまなサイズの画像を表示してエレガントに処理し、インタラクティブな機能を提供できます。

HTML 構造:
まず、画像ギャラリーの基本的な HTML 構造を作成する必要があります。以下は、必要に応じて変更できる簡単な HTML テンプレートです。

<!DOCTYPE html>
<html>
<head>
  <title>响应式图片库</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="jquery.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="gallery">
    <div class="image">
      <img src="image1.jpg" alt="Image 1">
      <div class="overlay">
        <a href="image1.jpg" target="_blank">查看大图</a>
      </div>
    </div>
    <!-- 添加更多图片 -->
  </div>
</body>
</html>

ログイン後にコピー

CSS スタイル:
次に、CSS を使用して画像ギャラリーのスタイルを設定する必要があります。以下は、ニーズに合わせて変更できる簡単な CSS の例です。

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.image {
  position: relative;
  margin: 10px;
  flex: 1 0 calc(25% - 20px);
}

.image img {
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.overlay a {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  padding: 10px 20px;
  border: 2px solid #fff;
  transition: background-color 0.3s ease;
}

.overlay:hover {
  opacity: 1;
}

.overlay:hover a {
  background-color: #fff;
  color: #000;
}

ログイン後にコピー

jQuery インタラクション:
最後に、jQuery を使用して、画像ギャラリーにいくつかのインタラクティブな機能を追加します。次のコード例は、クリック時に画像のサイズを切り替える方法を示しています。

$(document).ready(function() {
  $(".image").click(function() {
    $(this).toggleClass("enlarged");
  });
});

ログイン後にコピー

この例では、jQuery の .toggleClass() 関数を使用して、画像をクリックしたときにスタイルクラス名を「拡大」に切り替えます。 .enlarged クラスを CSS スタイルに追加して、クリックされた画像のサイズを調整できます。

.enlarged {
  flex: 0 0 50%;
}

ログイン後にコピー

このように、ユーザーが画像をクリックすると、元のサイズの半分に拡大されます。

結論:
HTML、CSS、jQuery を使用すると、レスポンシブな画像ギャラリーを簡単に作成できます。この画像ギャラリーでは、さまざまなサイズの画像を表示および処理し、各画像にインタラクティブな機能を提供できます。この記事が独自のレスポンシブ画像ギャラリーの作成に役立つことを願っています。

以上がHTML、CSS、jQuery を使用してレスポンシブな画像ギャラリーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

HTML、CSS、jQuery を使用してレスポンシブな画像ギャラリーを作成する方法