靳闯博客 记录是一种习惯,分享是一种态度
  • 波浪
  • 波浪
  • 波浪
  • 波浪
CSS3/jQuery实现移动端滑动图片层叠效果
发表于: | 分类: 技术积累,软件分享 | 标签: Html h5特效 | 评论: 0 | 阅读: 444

我个人比较喜欢这些个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;

图片示例效果

zyhd.pngzyhd1.pngzyhd2.png


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

如果这篇文章帮助到了你,我感到十分荣幸!


📬 评论留言

icon_mrgreen.pngicon_neutral.pngicon_twisted.pngicon_arrow.pngicon_eek.pngicon_smile.pngicon_confused.pngicon_cool.pngicon_evil.pngicon_biggrin.pngicon_idea.pngicon_redface.pngicon_razz.pngicon_rolleyes.pngicon_wink.pngicon_cry.pngicon_surprised.pngicon_lol.pngicon_mad.pngicon_sad.pngicon_exclaim.pngicon_question.png2018new_aini_org.png2018new_baobao_thumb.png2018new_erha_org.png2018new_kuxiao_thumb.png2018new_yun_thumb.png2018new_hufen_thumb.png2018new_gui_org.png2018new_xiaoerbuyu_org.png2018new_heixian_thumb.png2018new_wabi_thumb.png2018new_tianping_thumb.png

站点地图 网站地图 RSS Feed
豫ICP备17003270号-1 | Copyright © 2016-2020 靳闯博客
Typecho🍹Sgreen
TOP