Effet de rideau de comparaison d'image original implémenté par jQuery_jquery

Effet :

Code HTML :

Copier le code Le code est le suivant :

>< img alt="" src="js/VFX-after.jpg">

var imageWrap = $('. vfx-image-wrap' ), //Image de premier plantopImage = $(this).find('.before-image'), //Ligne de séparationdivider = $(this .find('.divider-bar'), stayBounce = $('.toggle-function');

imageWrap.on("mousemove", function (e) {

/ / Je dois localiser l'image supérieure et le séparateur pour qu'ils ne s'appliquent qu'à ceci
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(' spécial');
divider.css({ left: mouseX, transition: 'none' });
topImage.css({ width: mouseX, transition: 'none' }
});
stayBounce.click (function(){
$(this).toggleClass('stay');
});

imageWrap.on("mouseleave", function () {
if (! stayBounce.hasClass('stay')) {
divider.css({ gauche : '50%', transition : 'all .3s' }); : '50%', transition : 'tous les .3' });
}
}
}

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn