画像比較を実現する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クエリトランザクション処理へのノード接続の実装

目次トピックmysqlの追加、削除、変更、クエリを入力しますMySQL トランザクション処理私は M...

Linuxのdateコマンドの使用

1. コマンドの紹介date コマンドは、現在の時刻または指定された時刻を指定された形式で表示するた...

React+Koa によるファイルアップロードの実装例

目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...

Hadoop におけるネームノードとセカンダリネームノードの動作メカニズムの説明

1) プロセス 2) FSImageと編集NodeNode は HDFS の頭脳です。ファイルシステ...

JavaScriptの基本構文とデータ型の詳細な説明

目次JavaScript のインポート1. 内部ラベル2. 外部紹介基本的な構文データ型番号弦ブール...

MySQL の instr を使用したファジー クエリ メソッドの紹介

MySQL の内部関数instrを使用すると、従来の like クエリ メソッドを置き換えることがで...

HTML の div と span の比較_PowerNode Java Academy

1. <div></div> と <span></spa...

Nginx 環境での WordPress マルチサイト構成の詳細な説明

WordPress のマルチサイト機能を使用すると、1 つの WordPress プログラムをインス...

Kubernetes (k8s) 入門

Kubernetes は面白そうだったので（ギリシャ人なら名前に問題があると思うでしょうが）、ずっと...

sqlite を mysql スクリプトに移行する方法

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 パーレル # # https:/...

MySQL トリガーの使用シナリオとメソッドの例

トリガー：トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...

Reactの仮想DOMとdiffアルゴリズムの詳細な説明

仮想DOMの役割まず、仮想 DOM の出現によってどのような問題が解決されるのかを知る必要があります...

KVM 仮想マシンのオンライン ホット マイグレーションを実装する方法 (画像とテキスト)

1. KVM仮想マシンの移行方法と注意すべき点KVM 仮想マシンを移行する方法は 2 つあります。...

複合主キーと複数列インデックスに遭遇した場合の MySQL 行ロックの詳細な説明

背景今日、他のプロジェクト チームと協力してシス​​テムのストレス テストを実施しているときに、プロ...

MySQLの最適化の詳細な分析とパフォーマンス

導入データベースを使用したことがある人なら、機能面での like 記号と = 記号の類似点と相違点を...