SVG黑科技排版 | 双层上下自动对齐滑动，点击图片原生弹出

最新推荐文章于 2024-09-12 14:08:01 发布

原创最新推荐文章于 2024-09-12 14:08:01 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

转载请联系微信号：dong_dian_jun

文章标签：

#css #svg #html #新媒体运营 #内容运营

原创教程 | SVG公众号互动排版专栏收录该内容

14 篇文章

订阅专栏

本文展示了如何利用SVG进行黑科技排版，实现双层上下自动对齐的滑动图片效果。通过使用img标签确保点击图片能原生弹出，并借助零高度容器实现高度自适应的滑动。同时，利用CSS3的transform属性提升覆盖层层级，确保其完全覆盖图片并设置pointer-events: none以阻止点击。

案例效果

案例地址

点击查看案例https://mp.weixin.qq.com/s?__biz=MzAwNTM2ODYxMA==&mid=2650783866&idx=1&sn=528dffe87cca4e435c3589f1bcc27f5c&scene=21#wechat_redirect

案例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" />
    <title>双层上下自动对齐滑动，点击图片原生弹出</title>
    <style type="text/css">*{margin:0;padding:0;}.rich_media_content{overflow:hidden;color:#333;font-size:17px;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;text-align:justify;position:relative;z-index:0;}.rich_media_content *{max-width:100%!important;box-sizing:border-box!important;-webkit-box-sizing:border-box!important;word-wrap:break-word!important;}</style>
</head>
<body>
    <div class="rich_media_content" style="visibility: visible;">
        <section style="overflow: hidden;" data-wechat="dong_dian_jun">
            <section style="height: 0;">
                <section style="padding: 31.2% 28.5% 31.1% 28.6%;">
                    <section style="overflow: hidden scroll;scroll-snap-type: y mandatory;" data-wechat="dong_dian_jun">
                        <section style="height: 0;font-size: 0;line-height: 0;transform: scale(1);pointer-events: painted;" data-label="图片的宽高要跟撑开模块容器一致，否则会产生空白">
                            <section style="scroll-snap-align: center;" data-label="第1张图片">
                                <img style="display: block;width: 100%;" src="https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQJRWzJv7iatgyHzCpLjE0YmicAkkQhPEqaKgIV7VjMYJNHlkJFzOibtEpzqs9mia1micazp92sTjX0Z0Q/640?wx_fmt=jpeg"/>
                            </section>
                            <section style="scroll-snap-align: center;" data-label="第2张图片">
                                <img style="display: block;width: 100%;" src="https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQJRWzJv7iatgyHzCpLjE0YmxvnsZd15zUGib9ADia7fib6hibfjibwpWw59WYzhbu92fglcxYfUBGdaFPg/640?wx_fmt=jpeg"/>
                            </section>
                            <section style="scroll-snap-align: center;" data-label="第3张图片">
                                <img style="display: block;width: 100%;" src="https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQJRWzJv7iatgyHzCpLjE0YmaFmENDtNb6MVJMqTLC9uS8gId3a1J6b4ibq1iccWwLH8YrykicTHic5TSg/640?wx_fmt=jpeg"/>
                            </section>
                            <section style="scroll-snap-align: center;" data-label="第4张图片">
                                <img style="display: block;width: 100%;" src="https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQJRWzJv7iatgyHzCpLjE0Ym3ic7tFGVmkuGa6rPl8wjmOUYaLPBibAJRichxsDdKcAHPRrgJ7EJVFkww/640?wx_fmt=jpeg"/>
                            </section>
                        </section>
                        <section style="scroll-snap-align: center;pointer-events: none;" data-label="撑开模块是决定滑动容器的宽高">
                            <svg style="display: inline-block;width: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;user-select: none;-webkit-tap-highlight-color: transparent;" viewBox="0 0 880 1459"></svg>
                        </section>
                    </section>
                </section>
            </section>
            <section style="transform: translateZ(0.02px);pointer-events: none;">
                <section style="pointer-events: none;">
                    <svg style="display: inline-block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQJRWzJv7iatgyHzCpLjE0YmBNE6P6IpgCOf6VK00JLz5pOZIL9hfEn9Qib4EjB6IjBKC76CCSyjicOA/640?wx_fmt=png) center center no-repeat;background-size: 100% 100%;vertical-align: top;weixin: dong_dian_jun;user-select: none;-webkit-tap-highlight-color: transparent;pointer-events: none;" viewBox="0 0 1000 1337"></svg>
                </section>
            </section>
        </section>
    </div>
</body>
</html>

案例分析

可滑动的图片需要使用img标签，而不是svg元素的背景图，否则点击图片无法原生弹出；
通过使用零高容器实现高度不用固定就能实现上下滑动的效果，扩展性更强；
覆盖层需要使用CSS3属性transform: translateZ(0.02px)提高层级，完全覆盖滑动的图片，同时也要设置其不可点击pointer-events: none；