DDR爱好者之家

jQuery实现的原图对比窗帘效果
站长资源 2025/1/20 佚名
53 1538
DDR爱好者之家 Design By 杰米
效果：
jQuery实现的原图对比窗帘效果 
HTML代码：
复制代码 代码如下:
<div class="vfx-image-wrap special">
<div class="before-image" style="width: 50%; transition: all 0.3s ease 0s;">
<img alt="" src="/UploadFiles/2021-04-02/VFX-before.jpg"></div>
<div class="after-image">
<img alt="" src="/UploadFiles/2021-04-02/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' });
}
});
});
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米