CSS3/jQuery实现移动端滑动图片层叠效果
· 技术积累软件工具 · Html h5特效

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

源码下载和样式效果: CSS3/jQuery实现移动端滑动图片层叠效果

修改版: 修改版-竖图演示效果 |修改版-横图演示效果 | 下载修改版源码 密码:3kr5

左右滑动距离代码控制: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;

图片示例效果

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


本文最后记录时间 2024-03-30
文章链接地址:
https://me.jinchuang.org/archives/789.html
本站文章除注明[转载|引用|来源],均为本站原创内容,转载前请注明出处
纯CSS 蝴蝶飞舞动画效果
网页禁用iframe子页面的右键
自用的网页鼠标指针
HTML中文字的CSS 渐变样式

Mysql数据库的创建和授权

亿图图示-各种流程拓扑作图软件

我要留言

顶部