画像比較を実現する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 静的ファイル サービスの構成と最適化の詳細な説明
推薦する
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の具体的なコードを参考までに紹介しま...