画像比較を実現する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 静的ファイル サービスの構成と最適化の詳細な説明
推薦する
Alibaba Cloud Server で MySQL デュアルマシン ホットスタンバイを手動で実装する 2 つの方法
1. コンセプト1. ホットバックアップとバックアップの違いホット バックアップは高可用性 (HA)...
VirtualBox+Ubuntu16でKubernetesクラスタを構築する実装
目次Kubernetesについて基本的な環境の準備VirtualBoxをインストールするUbuntu...
Nginx 静的サービス設定の詳細な説明 (ルートとエイリアスの指示)
静的ファイルNginx は高いパフォーマンスで知られており、フロントエンドのリバース プロキシ サー...
Pythonは出力をcsv操作に書き込む
以下のように表示されます。 def test_write(self): フィールド=[] field...
CSS3 で背景ぼかしを実現する 3 つの方法 (要約)
1. 通常の背景ぼかしコード： <スタイル> html, 体 { 幅: 100%; 高...
Centos7 のインストールと Mysql5.7 の設定
ステップ1: MySQL YUMソースを取得するMySQLの公式サイトにアクセスして、RPMパッケー...
CentOS7.3 での MySQL 8.0.13 のインストールと設定のチュートリアル
1. 基本環境1. オペレーティングシステム: CentOS 7.3 2. MySQL: 8.0.1...
MySQLの明示的な型変換の簡単な分析
CAST関数前回の記事では、型変換を表示するために使用する CAST 関数について説明しました。暗黙...
フロントエンドにアニメーション遷移効果を実装する方法
目次導入従来のトランジションアニメーションCSS トランジションアニメーションjsアニメーション従来...
Docker の MySQL 時間とシステム時間の不一致の問題を解決する
最近、Docker に MySQL をインストールしたところ、データベースの時刻がシステム時刻と 8...
MySQL 5.7.21 のインストールとパスワード設定のチュートリアル
MySQL5.7.21のインストールとパスワード設定のチュートリアルは次のとおりです。公式リファレン...
JS変数ストレージのディープコピーとシャローコピーの詳しい説明
目次可変タイプとストレージスペーススタックメモリとヒープメモリ基本的なデータ型参照タイプグラフィック...
MySQL で重複レコードを見つけて削除する方法
みなさんこんにちは。私は技術の話ばかりして髪を切らない先生のトニーです。何らかの歴史的な理由や誤操作...
よく忘れられがちな CSS のヒント 26 選
これは、よく使われるけれども忘れられがちな CSS 実装方法のコレクションです。抜けや追加があれば、...
MySQLパラダイムの使用に関する詳細な説明
1. パラダイムこのパラダイムの英語名は Normal Form であり、1970 年代にリレーショ...