この記事の例では、画像比較を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.21 のインストールと設定方法のグラフィックチュートリアル (ウィンドウ)
>>: Nginx 静的ファイル サービスの構成と最適化の詳細な説明
目次トピックmysqlの追加、削除、変更、クエリを入力しますMySQL トランザクション処理私は M...
1. コマンドの紹介date コマンドは、現在の時刻または指定された時刻を指定された形式で表示するた...
目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...
1) プロセス 2) FSImageと編集NodeNode は HDFS の頭脳です。ファイルシステ...
目次JavaScript のインポート1. 内部ラベル2. 外部紹介基本的な構文データ型番号弦ブール...
MySQL の内部関数instrを使用すると、従来の like クエリ メソッドを置き換えることがで...
1. <div></div> と <span></spa...
WordPress のマルチサイト機能を使用すると、1 つの WordPress プログラムをインス...
Kubernetes は面白そうだったので(ギリシャ人なら名前に問題があると思うでしょうが)、ずっと...
さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 パーレル # # https:/...
トリガー:トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...
仮想DOMの役割まず、仮想 DOM の出現によってどのような問題が解決されるのかを知る必要があります...
1. KVM仮想マシンの移行方法と注意すべき点KVM 仮想マシンを移行する方法は 2 つあります。...
背景今日、他のプロジェクト チームと協力してシステムのストレス テストを実施しているときに、プロ...
導入データベースを使用したことがある人なら、機能面での like 記号と = 記号の類似点と相違点を...