画像比較を実現する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 5.7.27 のインストールと設定方法のグラフィックチュートリアル
MySQL 5.7.27のインストールチュートリアルは以下のように記録され、皆さんと共有されています...
JavaScript クロージャの説明
目次1. クロージャとは何ですか? 1.2 クロージャのメモ化: 関数は定義された環境を記憶する1....
カルーセルバナーの自動回転効果を実現する純粋な CSS
さっそくコードを見てみましょう * { マージン: 0; パディング: 0; } 。容器 { マージ...
HTML の値属性と名前属性の機能と使用法の紹介
1. ボタンで使用される値は、「OK」、「削除」など、ボタンに表示されるテキストを指します。 2. ...
nginx+php実行リクエストの動作原理の詳細な説明
PHPの仕組みまず、よく耳にするcgi、php-cgi、fastcgi、php-fpmの関係を理解し...
MySQLの水平および垂直テーブルパーティションの説明
前回の記事で、MySQL ステートメントの最適化には限界があると述べました。MySQL ステートメン...
SQL文のANDとORの実行順序で発生する問題
質問昨日、データベースSQLを書いているときに問題が発生しました。問題の根本は、SQL ステートメン...
Vueのprops設定の詳細な説明
<テンプレート> <div class="demo">...
Html+CSS フローティング広告ストリップの実装
1.html部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> ...
Linuxシステムの操作レベルの詳細な紹介
目次1. Linuxシステムの操作レベルの概要2. 実行レベルを確認する3. 現在のシステムの動作レ...
JS は Web ページナビゲーションバーの特殊効果を実現します
この記事では、ネイティブ JS を使用して実装された実用的な Web ナビゲーション バー効果を紹介...
JavaScript の基礎におけるデータ型の詳細な説明
目次1. データ型1.1 なぜデータ型が必要なのか? 1.2 変数のデータ型1.3 データ型の分類2...
Nacos で MySQL8 を設定する方法
1. MySQLデータベースnacos_configを作成する2. データベース nacos_con...
オーディオマニアにアピールするオーディオビジュアルLinuxディストリビューション
私は最近、多くの音楽に特化した Linux ディストリビューションの 1 つである Audiovis...
MySQL 5.7.15 バージョンのインストールと設定方法のグラフィックチュートリアル
この記事では、MySQLバージョン5.7のインストール方法と使用方法、およびデータベースデータの保存...