jQuery實現的原圖對比窗簾效果_jquery

效果：
 
HTML程式碼：

複製程式碼

複製程式碼

複製程式碼



複製程式碼

複製碼🎜>

​​

​​

JS程式碼：




複製程式碼



複製程式碼



複製程式碼


程式碼🎜>
$(function () {
//外DIV
var imageWrap = $('.vfx-image-wrap'),
//前景圖
topImage = $( this).find('.before-image'),
//分割線
divider = $(this).find('.divider-bar'),
stayBounce = $('.toggle -function');

imageWrap.on("mousemove", function (e) {
// Gotta localize top image and divider so it only applies to this
var thisoffs = $( ).offset(),
fullWidth = $(this).width(),
mouseX = e.pageX - offsets.left,
topImage = $(this).find('.before-image '),
divider = $(this).find('.divider-bar');

if (mouseX mouseX = 0;
} else if ( mouseX > fullWidth) {
mouseX = fullWidth
}

$(this).addClass('special'); 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({ left: '50%', transition: 'all .3s' }); topImage.css({ width: '50%', transition: 'all .3s' }); } } ); });