画像比較を実現するjQueryプラグイン

画像比較を実現するjQueryプラグイン

この記事の例では、画像比較を実現するためのjQueryプラグインの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

非常に一般的な効果で、実行するのは難しくありません

効果は以下のとおりです

コードセクション

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>写真を比較する</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <スタイル>
   *{
    マージン: 0px;
    パディング: 0px;
    ユーザー選択: なし;
   }
   .div{
    境界線: 1px 実線のライトグレー;
    幅: 400ピクセル;
    高さ: 200px;
    マージン: 10px;
    フロート: 左;
    位置: 相対的;
   }
   .img1{
    位置: 絶対;
    上: 0;
    下部: 0;
    左: 0;
    幅: 50%;
   }
   .img2{
    位置: 絶対;
    上: 0;
    下部: 0;
    左: 50%;
    右: 0;
   }
   .img1,.img2{
    背景の位置: 中央 中央;
    背景サイズ: 400px 200px;
    背景繰り返し: 繰り返しなし;
   }
   .img1{
    背景位置x: 0;
   }
   .img2{
    背景位置x: 100%;
    フィルター: 反転(100%);
   }
   。バー{
    位置: 絶対;
    上: 0;
    下部: 0;
    右:-4px;
    幅: 8px;
    背景色: グレー;
    カーソル:ew-resize;
    不透明度: 0.2;
   }
   。停止{
    ポインタイベント: なし;
   }
  </スタイル>
 </head>
 <本文>
  <div class="div">
   <div class="img1" style="背景画像: url(img/1.jpg);">
    <div class="bar" データフラグ="0"></div>
   </div>
   <div class="img2" style="背景画像: url(img/1.jpg);"></div>
  </div>
  <div class="div">
   <div class="img1" style="背景画像: url(img/2.jpg);">
    <div class="bar" データフラグ="0"></div>
   </div>
   <div class="img2" style="背景画像: url(img/2.jpg);"></div>
  </div>
 </本文>
</html>
<スクリプト>
 $(ドキュメント).ready(関数(){
  $(".bar").mousedown(関数(){
   $(this).parent().addClass("stop");
   $(this).parent().next().addClass("stop");
   $(this).attr("データフラグ","1")
  })
  $(".div").mousemove(関数(e){
   var temp = $(this).find('.bar').attr("データフラグ");
   if(temp=="1"){
    var w = $(this).width();
    var x = e.offsetX;
    var p = parseFloat((x/w).toFixed(2))*100;
    $(this).children(".img1").css('width',p+'%');
    $(this).children(".img2").css('left',p+'%');
   }
  })
  $(ドキュメント).mouseup(関数(){
   $(".img1,.img2").removeClass("stop");
   $(".bar").attr("データフラグ","0")
  })
 })
</スクリプト>

アイデアの説明

非常にシンプルな感じですね。背景画像として2枚の画像を使い、その配置位置とコンテナの幅と高さを制御するだけです。背景画像のサイズは適応最適化のために制御する必要があります。もちろん親コンテナが変わらなければ問題ありません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQuery 画像の前後比較プラグイン beforeAfter の使用例 [デモ ソース コードのダウンロード付き]
  • jQueryプラグインjquery.beforeafter.jsは、セパレーターバーを左右にドラッグして画像を比較する方法を実装します。

<<:  MySQL 5.7.21 のインストールと設定方法のグラフィックチュートリアル (ウィンドウ)

>>:  Nginx 静的ファイル サービスの構成と最適化の詳細な説明

推薦する

MySQLの使い方の詳細な説明

目次1. はじめに2. 本文2.1 Where句の位置2.2 演算子2.3 NULL値1. はじめに...

Alibaba Cloud OSS アクセス権設定（RAM 権限制御）実装

シナリオmyBuket の static/material/ ディレクトリなど、Alibaba Cl...

MySQL の制限使用法とページングクエリステートメントのパフォーマンス分析の詳細な説明

使用制限クエリ ステートメントを使用する場合、多くの場合、データの最初の数行または中間行を返す必要が...

HTMLで境界線を設定する3つの方法の詳細な説明

HTML で境界線を設定する 3 つの方法 境界線の幅: 1px 2px 2px; 境界線のスタイル...

Linux システム構成 (サービス制御) の詳細な紹介

目次序文1. システムサービス制御1. システムctl 2. ターゲット3. 共通システムサービス4...

HTML 基本要約推奨事項 (タイトル)

HTML: タイトル見出しは <h1> - <h6> などのタグによって定...

Linux システムのパフォーマンスを分析するための top コマンドの詳細な説明

Linux topコマンドの紹介top コマンドは、Linux でよく使用されるパフォーマンス分析ツ...

CSSのline-heightを継承する方法

Line-height はどのように継承されますか?30px などの特定の値を書き込むと、この値が継...

MySQLチュートリアルではストアドプロシージャを徹底的に理解します

目次1. ストアドプロシージャに関連する概念2. ストアドプロシージャの使用1) ストアドプロシージ...

JS を使用してデータ型を決定する 4 つの方法

目次序文1. 型2. インスタンス3. コンストラクター詳細： 4. 文字列要約する序文Javasc...

jQueryはアコーディオンの小さなケースを実装します

この記事では、アコーディオンを実装するためのjQueryの具体的なコードを参考までに紹介します。具体...

CentOS 6.2 に MySQL 5.7.28 をインストールするチュートリアル (mysql ノート)

1. 環境整備1.MySQLインストールパス: /usr/local 2. CentOS 6.2 ...

【Webデザイン】E-WebTemplates の美しい海外の Web ページ テンプレート (FLASH+PSD ソース ファイル+HTML) を共有します

これらはすべて海外のE-WebTemplates WebサイトからのWebページテンプレートであり、...

MySQL の遅いクエリ操作の例の分析 [有効化、テスト、確認など]

この記事では、MySQL のスロー クエリ操作について例を挙げて説明します。ご参考までに、詳細は以下...

CSSトランジションは高さを変更することで要素を拡大したり縮小したりします。

一般的な開発ニーズとして、要素の一部を必要になるまで折りたたんでおきたいことが挙げられます。 Boo...