jQuery_jquery로 구현한 원본 이미지 비교 커튼 효과

효과:

HTML 코드:

코드 복사 코드는 다음과 같습니다.

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

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({ left: mouseX, 전환: 'none' })
topImage.css({ width: mouseX, 전환: 'none' })
});
stayBounce.click (function(){
$(this).toggleClass('stay');
})

imageWrap.on("mouseleave", function () {
if (!stayBounce.hasClass('stay')) {
divider.css({ 왼쪽: '50%', 전환: 'all .3s' })
topImage.css({ width : '50%', 전환: '모두 .3s' })
}
})