画像比較を実現する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を監視するためのbinlogログ解析ツールの詳しい説明:Canal

Canal は、Java を使用して開発された Alibaba のオープンソース プロジェクトです...

React 非親子コンポーネントパラメータ渡しのサンプルコード

React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。 ...

Docker で FastDFS ファイル システムを構築する (マルチイメージ チュートリアル)

目次FastDFSについて1. 画像を検索する2. イメージをインストールする3.1. 必要なディレ...

Vue は PDF ファイルのオンライン プレビューを実装します (pdf.js/iframe/embed を使用)

序文現在、私はコースウェア PPT のオンライン プレビューを必要とする高品質のコースに取り組んでい...

MySQL における KEY、PRIMARY KEY、UNIQUE KEY、INDEX の違い

タイトルで提起された問題は、段階的に分解して解決することができます。 MySQL では KEY と ...

MySQL データベースの最適化に関する 9 つのヒント

目次1. 最も適切なフィールド属性を選択する2. フィールドをNOT NULLに設定してみる3. サ...

Vueはコンピュータカメラを呼び出して写真機能を実現します

この記事の例では、コンピュータカメラを呼び出して写真機能を実現するためのvueの具体的なコードを参考...

MySQL 学習ノート: データ エンジン

現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...

JSONオブジェクトのキーを置き換える最良の方法

JSON (JavaScript Object Notation、JS Object Notatio...

SSHを使用してDockerサーバーに接続する方法

初めて docker に触れたときは本当に戸惑いました。初心者向けのチュートリアルを長い間読みました...

Vue.set() と this.$set() の使い方と違い

開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成し...

HTML/XHTML における img 画像タグの基本的な使用法の詳細な説明

画像タグは、Web ページに画像を表示するために使用されます。 HTML/XHTML 画像 <...

CSS は Google マテリアル デザインのテキスト入力ボックス スタイルを実装します (推奨)

みなさんこんにちは。今日は、純粋な CSS を使用して Google マテリアル デザインのテキスト...

MySQL5.6.31 winx64.zip インストールと設定のチュートリアル

#1. ダウンロード # #2. ローカルに解凍し、必要な構成のmy*.iniを変更します。 #3....

カレンダー効果を実現するJavaScript

この記事では、カレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...