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' })
}

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。