Layui を使用して画像のスケーリングと透明効果を実現する方法

Layui を使用して画像のスケーリングと透明度の効果を実現する方法

Layui は、jQuery に基づいたフロントエンド UI フレームワークで、シンプルで使いやすく、強力です。 。 Web 開発では、画像に対して拡大縮小や透明度などの効果処理を実行する必要があることがよくあります。この記事では、Layui フレームワークを使用してこれら 2 つの効果を実現する方法と、具体的なコード例を紹介します。

1. 画像のスケーリング効果

まず、Layui フレームワークのコア ファイルと関連スタイル シートを導入する必要があります。次のコードをページの

タグに追加します:

<link rel="stylesheet" href="//res.layui.com/layui/v2.6.8/css/layui.css" media="all">
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//res.layui.com/layui/v2.6.8/layui.all.js" charset="utf-8"></script>

次に、Layui の画像スケーリング コンポーネントを使用して、画像のスケーリング効果を実現します。次のコードを タグに追加します:

<div class="layui-row">
  <div class="layui-col-md3">
    <img  class="layui-img-zoom lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="Layui を使用して画像のスケーリングと透明効果を実現する方法" >
  </div>
</div>

上記のコードでは、class 属性を追加することで、image 要素をズーム ターゲットとして設定します。次に、次の JS コードを追加して、Layui コンポーネントを初期化する必要があります。

<script>
layui.use('layer', function(){
  var layer = layui.layer;
  
  $(".layui-img-zoom").on("click", function(){
    var src = $(this).attr("src");
    layer.photos({
      photos: {
        data: [{
          src: src
        }]
      },
      anim: 5
    });
  });
});
</script>

上記のコードでは、画像のクリック イベントをリッスンすることで、Layui の画像ズーム効果をトリガーします。クリック イベントでは、画像の src 属性を取得し、layer.photos メソッドを呼び出してズーム効果を実現します。 anim パラメータはズーム効果のアニメーション スタイルを制御します。ここではフェード効果を使用します。

2. 画像の透明効果

画像のスケーリング効果と同様に、最初に Layui フレームワークのコア ファイルと関連スタイル シートを導入する必要があります。コードは次のとおりです:

<link rel="stylesheet" href="//res.layui.com/layui/v2.6.8/css/layui.css" media="all">
<script src="//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//res.layui.com/layui/v2.6.8/layui.all.js" charset="utf-8"></script>

次に、次のコードを タグに追加します:

<div class="layui-row">
  <div class="layui-col-md3">
    <img  class="layui-img-transparent lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="Layui を使用して画像のスケーリングと透明効果を実現する方法" >
  </div>
</div>

上記のコードでは、画像要素もターゲットとして定義します。 class属性を追加することで透明効果が得られます。次に、次の JS コードを追加して、Layui コンポーネントを初期化する必要があります。

<script>
layui.use('layer', function(){
  var layer = layui.layer;
  
  $(".layui-img-transparent").hover(function(){
    var src = $(this).attr("src");
    layer.tips('透明效果', this, {
      tips: [1, '#000'],
      time: 2000
    });
    $(this).css("opacity", "0.5");
  }, function(){
    $(this).css("opacity", "1.0");
  });
});
</script>

上記のコードでは、マウスのホバー イベントをリッスンすることで、マウスがホバーしたときに透明な効果を実現します。同時に、layer.tips メソッドを使用してプロンプト ボックスをポップアップ表示し、「透明効果」のテキスト プロンプトを表示しました。 tips パラメータはプロンプト ボックスのスタイルを指定し、time パラメータはプロンプト ボックスの表示時間を制御します。ホバーイベントのコールバック関数では、CSS スタイルを変更することで画像の透明度を変更します。

上記のコード例を通じて、Layui フレームワークを使用して画像のスケーリングと透明度の効果を実現できます。これらの効果は、ユーザー エクスペリエンスを向上させるだけでなく、ページをより鮮やかで魅力的なものにします。同時に、Layui フレームワークのシンプルさと使いやすさにより、これらの効果を迅速に達成することができます。フロントエンド開発に興味がある場合は、Layui フレームワークを試して、より多くの効果や機能を探索してみるとよいでしょう。

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