HTML代码：
コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

jQuery_jqueryで実装したオリジナル画像比較カーテンエフェクト

WBOY
リリース： 2016-05-16 16:44:36
オリジナル
1708 人が閲覧しました

効果:
jQuery_jqueryで実装したオリジナル画像比較カーテンエフェクト
HTML コード:

コードをコピー コードは次のとおりです:




>





JS コード:


コードをコピー コードは次のとおりです。
$(function () {
//Outer DIV
var imageWrap = $('. vfx-image-wrap' ),
//前景画像
topImage = $(this).find('.before-image'),
//分割線
divider = $(this ).find('.divider-bar'),
stayBounce = $('.toggle-function');

imageWrap.on("mousemove", function (e) {
/ / これにのみ適用されるように、トップ画像とディバイダーをローカライズする必要があります。
var offsets = $(this).offset(),
fullWidth = $(this).width(),
mouseX = e.pageX - offsets.left、
topImage = $(this).find('.before-image')、
divider = $(this).find('.divider-bar'); >if (mouseX < 0) {
mouseX = 0;
} else if (mouseX > fullWidth) {
mouseX = fullWidth
}
$(this).addClass('特別');
divider.css({ 左: マウス X, 遷移: 'なし' });
topImage.css({ 幅: マウス X, 遷移: 'なし' });
stayBounce.click (function(){
$(this).toggleClass('stay');
});

imageWrap.on("mouseleave", function () {
if (!stayBounce.hasClass('stay')) {
divider.css({ left: '50%'、transition: 'all .3s' }); : '50%'、遷移: 'すべて .3' })
}
関連ラベル：
原图对比 窗帘效果
ソース：php.cn
前の記事：jQuery を実装して、行ごとにテーブルの色を変更する方法と、mouseover_jquery の後に色を変更する 2 つの方法 次の記事：QQスペーストップ折りたたみティアエフェクトサンプルcode_jquery
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
Android 上の React-Native でステータス更新が機能しない スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2...
から 2024-04-06 16:54:10
0
1
410
Imagick、Adobe Photoshop、Windows の比較 - 解像度の検出 (1 センチメートルあたりのピクセル数またはインチあたりのピクセル数) これは質問ではなく、DPI がさまざまなファイル形式でどのように保存されるかについての理解を深め、なぜ DPI が機能するのかを議論する試みです。私は画像 (JPG、PNG、Tif...
から 2024-04-06 16:01:27
0
1
397
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート