html重叠图片滑动效果,CSS3/jQuery实现移动端滑动图片层叠效果

我个人比较喜欢这些个H5网页特效，没事就会找一些别人写好的代码修修改改

左右滑动距离代码控制：170 (数字越大滑动距离越短)window.CP.exitedLoop(3);

initX = mouseX;

e.preventDefault();

if (Math.abs(transX) >= curSlide.offsetWidth - 170) {

document.removeEventListener('mousemove', slideMouseMove, false);

document.removeEventListener('touchmove', slideMouseMove, false);

curSlide.style.transition = 'ease 0.2s';

curSlide.style.opacity = 0;

prevSlide = curSlide;

attachEvents(sliders[sliders.length - 2]);

slideMouseUp();

setTimeout(function () {

slider.insertBefore(prevSlide, slider.firstChild);

prevSlide.style.transition = 'none';

prevSlide.style.opacity = '1';

slideMouseUp();

}, 201);

return;

}

图片下方层叠效果：1700px (数字越大，图片显示层级由上往下；数字越小，图片显示层级由下往上)perspective:1700px;

图片示例效果

商业转载请联系作者获得授权，非商业转载请注明出处 本文地址：https://me.jinchuang.org/archives/789.html