SVG互动排版公众号图文『点击播放GIF与音乐，并展开长图』模板代码
发布于 3 年前 作者 maoli 1560 次浏览 来自 分享

模板效果

点击查看效果

模板代码

<section style="overflow: hidden;line-height: 0;">
    <!-- 长图内容 -->
    <section style="height: 0;" data-author="公众号：懂点君">
        <svg viewbox="0 0 1000 1779" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ4iawa82bOlrjmCLHqDZXzfHdhYpqjUQeVHJicmflvx1xYibOCB5ANibkIRZ62KeDV0BL599UibM2mT9g/0?wx_fmt=png) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;" data-author="公众号：懂点君"></svg>
        <svg viewbox="0 0 1000 1779" style="display: block;width: 100%;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ4iawa82bOlrjmCLHqDZXzfgVxgMMTPrczc7aVXeXzMHb2w8bvIK17WBv92gskPaPmLw8Mqicxe6Gg/0?wx_fmt=png) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;" data-author="公众号：懂点君"></svg>
        <svg viewbox="0 0 1000 1778" style="display: block;width: 100%;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ4iawa82bOlrjmCLHqDZXzfKr6cyiaIV5NV9za1Qcdw05TfGLjXyQCMrno8VspMPykH3Iibic0Fea21Q/0?wx_fmt=png) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;" data-author="公众号：懂点君"></svg>
        <svg viewbox="0 0 1000 1779" style="display: block;width: 100%;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ4iawa82bOlrjmCLHqDZXzficTJpgEoJV4iavwXxiaia0FsjMPDkJlkTAR37Lo3zpuYpzQC9taCY4FsyA/0?wx_fmt=png) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;" data-author="公众号：懂点君"></svg>
    </section>
    <!-- 播放gif -->
    <section style="transform: scale(1);">
        <svg viewbox="0 0 2000 2000" style="display: block;max-width: none!important;width: 100%;background: #fff url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ4iawa82bOlrjmCLHqDZXzfjRxCUO8IM0t8j1JZfwLkaaj2zXVJYo0KmQYlWlCeBDhaV7Wf3P7o6w/0?wx_fmt=png) center center no-repeat;background-size: 100% 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;" data-author="公众号：懂点君">
            <!-- 展开长图 -->
            <animate attributeName="width" values="100%;711.5%;711.5%" keyTimes="0;.0001;1" dur="50000s" begin="touchstart+3s" fill="freeze" restart="never"></animate>
            <!-- 使用透明度隐藏svg的内容 -->
            <animate attributeName="opacity" values="1;0;0" keyTimes="0;.0001;1" dur="400s" begin="touchstart+3s" fill="freeze" restart="never"></animate>
            <g>
                <!-- 移动gif，目的是触发gif播放 -->
                <animateTransform attributeName="transform" type="translate" values="0 0;-2000 0;-2000 0" keyTimes="0;.0000001;1" dur="400s" begin="touchstart" fill="freeze" restart="never"></animateTransform>
                <!-- 放置gif图 -->
                <foreignObject x="2000" y="0" width="2000" height="2000">
                    <svg viewbox="0 0 2000 2000" style="display: block;width: 100%;background: #fff url(https://mmbiz.qpic.cn/mmbiz_gif/JpraGu7eGqQ4iawa82bOlrjmCLHqDZXzfHA66yM4geWa1jxOlGPGsJjpHOuhhgJLEycEaYWw96AIYCS2YGqibSDA/0?wx_fmt=gif) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;"></svg>
                </foreignObject>
                <g>
                    <!-- 把点击区域移出可视区域，目的是防止用户重复点击 -->
                    <animateTransform attributeName="transform" type="translate" values="0 0;9999 0;9999 0" keyTimes="0;.0000001;1" dur="400s" begin="touchstart" fill="freeze" restart="never"></animateTransform>
                    <set attributeName="visibility" from="visible" to="hidden" dur="0.3s" begin="touchstart" fill="freeze" restart="never"></set>
                    <!-- 引导点击 -->
                    <g>
                        <set attributeName="visibility" to="hidden" begin="touchstart" dur="0.001ms" fill="freeze"></set>
                        <circle fill="#0A770F" cx="686" cy="849" r="80" style="pointer-events: visible;">
                            <animate attributeName="opacity" values="0.8;0.6;0.8" dur="1.5s" begin="0s" repeatCount="indefinite"></animate>
                        </circle>
                        <circle fill="#E7CE08" cx="686" cy="849" r="50" style="pointer-events: visible;">
                            <animate attributeName="r" values="45;50;45" dur="1.5s" begin="0s" repeatCount="indefinite"></animate>
                        </circle>
                    </g>
                    <!-- 音乐代码 -->
                    <foreignObject x="525" y="696" width="314" height="389" opacity="0">
                        <section style="transform: scale(30) translate(-113px, 5px);pointer-events: visiblePainted;opacity: 0;">
                            <!------------------ 插入音乐代码 ------------------>
                            <qqmusic class="js_editor_qqmusic js_uneditable" musicid="240999188" mid="002eJUYL2RV4qp" albumurl="https://y.gtimg.cn/music/photo_new/T002R68x68M000002eJAds1bpcga.jpg" audiourl="http://isure6.stream.qqmusic.qq.com/C200002eJUYL2RV4qp.m4a?guid=2000001731&amp;vkey=948533B265D8D555ECF34DC0987A331124E943BE327DE620DE5F3DAB776A3C0530FF5817E96072E75D41AF9071F75FDCA15F8159B0EAF779&amp;uin=&amp;fromtag=50" music_name="等一分钟" singer="徐誉滕&nbsp;-&nbsp;做我老婆好不好" play_length="236" src="/mp/readtemplate?t=app_editor/music&amp;singer=%E5%BE%90%E8%AA%89%E6%BB%95%20-%20%E5%81%9A%E6%88%91%E8%80%81%E5%A9%86%E5%A5%BD%E4%B8%8D%E5%A5%BD&amp;music_name=%E7%AD%89%E4%B8%80%E5%88%86%E9%92%9F&amp;albumurl=https%3A%2F%2Fy.gtimg.cn%2Fmusic%2Fphoto_new%2FT002R68x68M000002eJAds1bpcga.jpg&amp;musictype=1" musictype="1" otherid="002eJUYL2RV4qp" albumid="002eJAds1bpcga" jumpurlkey="" data-pluginname="insertaudio"></qqmusic><span id="qqmusic_main_240999188_0" class="js_wap_qqmusic db pages_reset music_area ">     <span class="tc tips_global unsupport_tips" style="display:none;">     当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放    </span>     <span class="db music_card appmsg_card_context appmsg_card_active">             <a id="qqmusic_home_240999188_0" class="music_card_bd">                 <span class="music_card_title">等一分钟</span>                 <span class="music_card_desc">徐誉滕&nbsp;-&nbsp;做我老婆好不好</span>                 <span class="music_card_source ">                   <img src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/qqmusic/icon_qqmusic_source55871f.svg" alt=""></span>             </a>             <span id="qqmusic_play_240999188_0" class="music_card_ft">                 <i class="weui-play-btn"></i>                 <!--                 <img src="//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/qqmusic/icon_qqmusic_default.2x55871f.png" alt="" class="pic_qqmusic_default">                 -->                 <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000002eJAds1bpcga.jpg" data-autourl="http://isure6.stream.qqmusic.qq.com/C200002eJUYL2RV4qp.m4a?guid=2000001731&amp;vkey=948533B265D8D555ECF34DC0987A331124E943BE327DE620DE5F3DAB776A3C0530FF5817E96072E75D41AF9071F75FDCA15F8159B0EAF779&amp;uin=&amp;fromtag=50" data-musicid="240999188" class="music_card_thumb" alt="">             </span>     </span> </span>
                            <!------------------ 插入音乐代码 ------------------>
                        </section>
                    </foreignObject>
                </g>
            </g>
        </svg>            
    </section>
    <!-- 覆盖一层path，防止用户误碰 -->
    <section style="height: 0px;line-height: 0;pointer-events: none;transform: rotate(180deg);weixin: dong_dian_jun;" data-share="公众号：懂点君">
        <svg style="display: block;width: 100%;transform: rotate(180deg);" viewBox="0 0 2000 2000">
            <path xmlns="http://www.w3.org/2000/svg" d="M-2-2V2000H2000V-2ZM972,1161H396V585H972Z" opacity="0" style="pointer-events: visible;fill:#000;weixin: dong_dian_jun;opacity: 0;"/>
        </svg>
    </section>
</section>
回到顶部