Von jQuery_jquery implementierter Vorhangeffekt für den Originalbildvergleich

Wirkung:

HTML-Code:

Code kopieren Der Code lautet wie folgt:

>
>< img alt="" src="js/VFX-after.jpg"> Übergang: alle 0,3 Sekunden, 0 Sekunden; >Code kopieren


Der Code lautet wie folgt:


$(function () {
//Outer DIV
var imageWrap = $('. vfx-image-wrap' ),

//Vordergrundbild
topImage = $(this).find('.before-image'),
//Trennlinie

divider = $(this ).find('. Divider-Bar'), stayBounce = $('.toggle-function'); imageWrap.on("mousemove", function (e) { / / Das obere Bild und die Trennlinie müssen lokalisiert werden, damit es nur für dieses gilt: 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(' „special“);
stayBounce.click (function(){
$(this).toggleClass('stay');
});

imageWrap.on("mouseleave", function () {
if (! StayBounce.hasClass('Stay')) {
Divider.css({ left: '50%', Transition: 'all .3s' });
topImage.css({ width : '50%', Übergang: 'alle .3s' });
}
});

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn