jQuery实现的原图对比窗帘效果

178 阅读 0 评论 118 点赞

我是靠谱客的博主丰富过客，最近开发中收集的这篇文章主要介绍jQuery实现的原图对比窗帘效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果：

HTML代码：

复制代码代码如下:

 
<div class="vfx-image-wrap special"> 
<div class="before-image" style="width: 50%; transition: all 0.3s ease 0s;"> 
<img alt="" src="js/VFX-before.jpg"> 
</div> 
<div class="after-image"> 
<img alt="" src="js/VFX-after.jpg"> 
</div> 
<div class="divider-bar" style="left: 50%; transition: all 0.3s ease 0s;"></div> 
</div> 

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