Layui を使用して画像マスキング効果を実現する方法

Layui を使用して画像マスキング効果を実現する方法

Web 開発では、画像マスキング効果は一般的なインタラクティブ効果であり、マスキングを通じて画像を強化できます。アピールは、ある種の促進の役割を果たすこともできます。この記事では、Layui フレームワークを使用して画像マスキング効果を実現する方法を紹介し、具体的なコード例を示します。

Layui は、豊富なコンポーネントとインターフェイスを提供する軽量のフロントエンド UI フレームワークで、フロントエンド インターフェイスを迅速に構築するのに非常に適しています。画像マスキング効果を実現するには、画像リスト、マスキング レイヤー、イベント リスニングなど、Layui のいくつかのコンポーネントと機能を使用する必要があります。

1. Layui フレームワークを導入する

まず、Layui フレームワークをダウンロードし、関連する CSS および JavaScript ファイルを HTML ファイルに導入する必要があります。 Layui 公式 Web サイト (http://www.layui.com/) からフレームワークの最新バージョンをダウンロードし、HTML ファイルに次のコードを追加できます。画像リスト

2. 次に、画像を表示するリストを作成する必要があります。 Layui のテーブル コンポーネントを通じて実装でき、Layui の画像モジュールと組み合わせると、画像情報を便利に表示できます。 HTML コードの例を次に示します。

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

上記の例では 2 つの画像のみが表示されていますが、必要に応じてさらに画像を追加できます。

CSS スタイルの追加

3. 次に、画像マスクの効果を設定するためにいくつかの CSS スタイルを追加する必要があります。 HTML ファイルの

タグに次のコードを追加できます。

<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="150">
  </colgroup>
  <thead>
    <tr>
      <th>图片标题</th>
      <th>图片</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>图片1</td>
      <td><img  src="img/1.jpg" alt="Layui を使用して画像マスキング効果を実現する方法" ></td>
    </tr>
    <tr>
      <td>图片2</td>
      <td><img  src="img/2.jpg" alt="Layui を使用して画像マスキング効果を実現する方法" ></td>
    </tr>
    ...
  </tbody>
</table>

上記のコードでは、画像の幅と高さ、および画像の幅と高さを設定します。ポインタのスタイル。マスク レイヤーは絶対配置を使用して画像の上部を覆い、背景色は半透明の黒です。マスクレイヤーの透明度を0に設定し、トランジション効果を追加します。画像上にマウスを置くとマスクレイヤーの透明度が0から1に変化し、マスク効果のアニメーションを実現します。

JavaScript コードの追加

4. 最後に、画像のクリック イベントを監視し、大きな画像の効果を表示するための JavaScript コードを追加する必要があります。 HTML ファイルの
<script></script>

タグに次のコードを追加できます。

.layui-table td img {
  width: 100%;
  height: auto;
  cursor: pointer;
  position: relative;
}

.layui-table td .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.layui-table td:hover .mask {
  opacity: 1;
}

上記のコードでは、Layui のレイヤー モジュールを使用してポップアップ レイヤーを作成し、大きな画像をご覧ください。画像をクリックすると、画像のパスが取得され、layer.open メソッドによってポップアップ レイヤーが開かれ、大きな画像が表示されます。ポップアップ レイヤーのスタイルと機能は、必要に応じて調整できます。

これまでに、Layui を使用して画像マスキング効果を実現する手順が完了しました。上記のサンプルコードを基に実際の開発を行い、必要に応じてスタイルや機能をカスタマイズしてください。 Layui が提供するコンポーネントと機能により、画像マスキング効果を簡単かつ迅速に実現できます。

以上がLayui を使用して画像マスキング効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。