画像比較を実現する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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.21 のインストールと設定方法のグラフィックチュートリアル (ウィンドウ)
>>: Nginx 静的ファイル サービスの構成と最適化の詳細な説明
推薦する
リモート Linux システムでポートが開いているかどうかを確認する 3 つの方法
これは、Linux 管理者だけでなく、私たち全員にとって非常に重要なトピックです。つまり、IT イン...
Windows でのシンプルな Mysql バックアップ BAT スクリプトの共有
序文この記事では、Windows で Mysql をバックアップするための簡単な BAT スクリプト...
vueの実践的な応用におけるvuexの永続性の詳細な説明
目次vuex 永続性要約するvuex 永続性vuex: ブラウザを更新すると、vuexの状態は初期状...
CSSレコードテキストアイコン配置のいくつかのソリューション
開発中に画像とテキストが 1 行に表示されることはよくあります。2 つのインライン要素を揃えるのは通...
HTML TextArea でのフォーマット保存の問題の解決方法
textarea の形式は保存時にデータベースに保存できますが、表示時には /n と相互に変換できな...
Vueにおける仮想DOMの理解のまとめ
これは本質的に、ビュー インターフェース構造を記述するために使用される共通の js オブジェクトです...
CSS 疑似要素を使用して複数の連続する要素のスタイルを制御する方法
CSS 疑似要素を使用して要素を制御する場合、一部の要素のスタイルを変更する必要があることがよくあり...
サブメニューをクリックする効果を実現するJavaScript
この記事では、クリック時にサブメニューを表示するためのJavaScriptの具体的なコードを参考まで...
CSSタグの表示モードの詳細な説明
ラベル表示モード（重要） divタグとspanタグ1. スタイルはまったく同じですが、ラベルが異なり...
Vueはスライダードラッグ検証機能の全プロセスを実現します
レンダリング 骨組みを定義し、HTMLとCSSを記述するHTML部分 <テンプレート> ...
Linux スワップ パーティション (詳細説明)
目次リナックス1. SWAPとは2. swappiness は何を調節しますか? 3. スワップ操作...
Linux に JDK1.8 をインストールするための詳細なチュートリアル
1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...
MySQLのバックアップとリカバリの詳細な説明
序文：前回の記事では、さまざまな MySQL ステートメント構文の使用法とユーザー権限に関する知識を...
MySQL データベース開発仕様 [推奨]
最近、問題のある新しい SQL が本番データベースに入力される数を最小限に抑えるために、開発仕様を整...
MySQLデータベースに画像を保存するいくつかの方法
通常、ユーザーがアップロードした写真はデータベースに保存する必要があります。一般的に、解決策は 2 ...