この記事の例では、画像比較を実現するための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 静的ファイル サービスの構成と最適化の詳細な説明
Canal は、Java を使用して開発された Alibaba のオープンソース プロジェクトです...
React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。 ...
目次FastDFSについて1. 画像を検索する2. イメージをインストールする3.1. 必要なディレ...
序文現在、私はコースウェア PPT のオンライン プレビューを必要とする高品質のコースに取り組んでい...
タイトルで提起された問題は、段階的に分解して解決することができます。 MySQL では KEY と ...
目次1. 最も適切なフィールド属性を選択する2. フィールドをNOT NULLに設定してみる3. サ...
この記事の例では、コンピュータカメラを呼び出して写真機能を実現するためのvueの具体的なコードを参考...
現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...
JSON (JavaScript Object Notation、JS Object Notatio...
初めて docker に触れたときは本当に戸惑いました。初心者向けのチュートリアルを長い間読みました...
開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成し...
画像タグは、Web ページに画像を表示するために使用されます。 HTML/XHTML 画像 <...
みなさんこんにちは。今日は、純粋な CSS を使用して Google マテリアル デザインのテキスト...
#1. ダウンロード # #2. ローカルに解凍し、必要な構成のmy*.iniを変更します。 #3....
この記事では、カレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...