时间:2021-05-26
效果:
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' });
}
});
});
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Photoshop中没有直接对比原图的快捷键,但可以利用复制原图和历史记录的方法实现快速对比。 1、不需要复制图层,通过历史记录面板的方式对比原图。当完成编辑
python实现原图裁剪为固定尺寸小图的具体代码,供大家参考,具体内容如下讲解1、代码效果:实现原图裁剪为固定尺寸小图代码importnumpyasnpimpo
实现效果第一张图为原图,其余的图为分割后的图形代码实现:#-*-coding:utf-8-*-importnumpyasnpimportcv2#--------
本文为大家分享了iOS图片模糊效果的三种实现方式,供大家参考,具体内容如下1.实现效果依次如图:原图、iOS8效果、CoreImage效果、VImage效果-2
分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤。jQuery实例—选项卡的简单实现(js源码和jQuery)div{di