Layui を使用して画像のぼかしと白黒効果を実現する方法

Layui を使用して画像のぼかしと白黒効果を実現する方法

Layui は、役立つコンポーネントとツールを豊富に提供する優れたフロントエンド UI フレームワークです。開発者 美しく効率的な Web インターフェイスを簡単に構築できます。この記事では、Layui を使用して画像のぼかしと白黒効果を実現する方法と、具体的なコード例を紹介します。

1. 画像のぼかし効果

画像のぼかし効果を実現するには、Layui の画像プレビュー コンポーネント Layer.photos を使用します。ユーザーが画像をクリックすると、フローティング レイヤーがポップアップして高解像度の大きな画像が表示され、大きな画像にぼかし効果が追加されます。

まず、Layui のコア ファイルと関連スタイル ファイルをページに導入する必要があります。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>

次に、画像を表示する必要がある場所に lay-photo## を追加します。 #クラス名を指定し、data-src 属性を画像要素に追加します。値は画像の元のパスです。

<img class="lay-photo" data-src="path/to/image.jpg" src="path/to/image.jpg" alt="图片">

最後に、次のコードをファイルの最後に追加します。ページ:

<script>
layui.use(['layer'], function () {
  var layer = layui.layer;
  
  layer.photos({
    photos: '.lay-photo',
    anim: 5, // 设置弹出浮层的动画效果
    shadeClose: true, // 点击遮罩关闭浮层
    done: function (layero, index, data) {
      // 实现图片的模糊效果
      var img = layero.find('.layui-layer-content img');
      img.css({
        'filter': 'blur(5px)' // 设置图片模糊度
      });
    }
  });
});
</script>

コードの実行後、ユーザーが画像をクリックすると、元の画像がポップアップ フローティング レイヤーの形式で表示され、ぼかし効果が追加されます。実際のニーズに応じて

blur 属性の値を調整し、ぼかしの程度を制御できます。

画像の白黒効果

画像の白黒効果を実現するには、Layui の画像カルーセル コンポーネント スライダーを使用します。カルーセル コンポーネントのコールバック関数で、現在画像を表示している要素を取得し、CSS フィルター属性を使用してそれを白黒効果に変換します。

まず、上記と同様に、Layui のコア ファイルと関連スタイル ファイルをページに導入する必要があります。

次に、画像を表示する必要があるクラス名

layui-carousel を追加し、値を指定して lay-src 属性を画像要素に追加します。 :

<div class="layui-carousel" lay-indicator="inside" lay-arrow="always">
  <div carousel-item>
    <div><img  lay-src="path/to/image1.jpg" alt="Layui を使用して画像のぼかしと白黒効果を実現する方法" ></div>
    <div><img  lay-src="path/to/image2.jpg" alt="Layui を使用して画像のぼかしと白黒効果を実現する方法" ></div>
    <div><img  lay-src="path/to/image3.jpg" alt="Layui を使用して画像のぼかしと白黒効果を実現する方法" ></div>
  </div>
</div>

最後に、ページの下部に次のコードを追加します:

<script>
layui.use(['carousel'], function () {
  var carousel = layui.carousel;
  
  carousel.render({
    elem: '.layui-carousel',
    anim: 'fade',
    width: '800px',
    height: '400px',
    arrow: 'always',
    indicator: 'inside',
    autoplay: true,
    interval: 3000,
    done: function (index, elem, obj) {
      // 实现图片的黑白效果
      var imgs = elem.find('img');
      imgs.css({
        'filter': 'grayscale(100%)' // 设置图片为黑白效果
      });
    }
  });
});
</script>

コードを実行すると、カルーセルが白黒で表示されます。

概要

上記のコード例を通じて、Layui を使用して画像のぼかしと白黒効果を実現するのが非常に簡単であることがわかります。記事の手順に従い、関連ファイルを導入し、要素のクラス名と属性を設定し、対応するコールバック関数にスタイル調整を追加するだけです。もちろん、上記の例は単純なデモンストレーションにすぎず、開発者は実際のニーズに応じてコードをさらに拡張および最適化できます。

この記事が、Layui 開発における画像のぼかしと白黒効果の実現に役立つことを願っています。

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