SVG排版公众号文章『点击同时显示图片与音乐播放』模板代码
模板效果
模板代码
<section style="overflow: hidden;width: 100%;height: 100%;visibility: visible;" data-share="公众号：懂点君">
<!-- 第二张图片 -->
<svg width="100%" height="100%" style="visibility: visible;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSiak2l2UzsVHxhomBS2bjpEPTxOt0xNE1dSzhJOrqnpI7WziaxSSxAKHiccAY7GHGIkSAYad1xlaibdw/0?wx_fmt=gif;)
no-repeat top center;background-size: 100%;background-position: 0 0;" viewBox="0 0 1024 2225">
<g data-share="公众号：懂点君">
<!-- 第一张图片 -->
<foreignObject width="100%" height="100%" x="0" y="0">
<svg style="visibility: visible;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSiak2l2UzsVHxhomBS2bjpEgkFeFiajNpSaqyAJd2gaUD6ibCgtPjv2TAfcyeibNR5VzibbyCDdhiagjnw/0?wx_fmt=jpeg)
no-repeat top center;background-size: 100%;pointer-events: none;" viewBox="0 0 1024 2225" xmlns="http://www.w3.org/2000/svg">
</svg>
</foreignObject>
<!-- 音乐区域 -->
<foreignObject width="100%" height="100%" x="0" y="0">
<section style="overflow: hidden;pointer-events: painted;opacity: 0;transform: scale(90) translate(-462px, 19px);">
<!-- 需要替换如下音乐代码（具体步骤请看视频教程） -->
<section><qqmusic class="js_editor_qqmusic js_uneditable" musicid="213874992" mid="001Mi6C00aNunH" albumurl="https://y.gtimg.cn/music/photo_new/T002R68x68M000003x0x0W02puoP.jpg" audiourl="http://isure6.stream.qqmusic.qq.com/C200004VUx6R2b7AMH.m4a?guid=2000001731&vkey=F5565B900A3BC11A2DE3C4CF1499B08A96E19BA02F27BDA9B18FAA349BE61146EB2B66D5545097C71376BE16E58F8721D427D1351DD9CFBA&uin=&fromtag=50" music_name="奔跑" singer="羽泉 - 嗨，唱起来 第2期" play_length="164" src="/mp/readtemplate?t=app_editor/music&singer=%E7%BE%BD%E6%B3%89%20-%20%E5%97%A8%EF%BC%8C%E5%94%B1%E8%B5%B7%E6%9D%A5%20%E7%AC%AC2%E6%9C%9F&music_name=%E5%A5%94%E8%B7%91&albumurl=https%3A%2F%2Fy.gtimg.cn%2Fmusic%2Fphoto_new%2FT002R68x68M000003x0x0W02puoP.jpg&musictype=1" musictype="1" otherid="001Mi6C00aNunH" albumid="003x0x0W02puoP" jumpurlkey="" data-pluginname="insertaudio"></qqmusic><span id="qqmusic_main_213874992_2" 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_213874992_2" class="music_card_bd"> <span class="music_card_title">奔跑</span> <span class="music_card_desc">羽泉 - 嗨，唱起来 第2期</span> <span class="music_card_source "> <img src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/qqmusic/icon_qqmusic_source531a3f.svg" alt=""></span> </a> <span id="qqmusic_play_213874992_2" 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.2x531a3f.png" alt="" class="pic_qqmusic_default"> --> <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003x0x0W02puoP.jpg" data-autourl="http://isure6.stream.qqmusic.qq.com/C200004VUx6R2b7AMH.m4a?guid=2000001731&vkey=F5565B900A3BC11A2DE3C4CF1499B08A96E19BA02F27BDA9B18FAA349BE61146EB2B66D5545097C71376BE16E58F8721D427D1351DD9CFBA&uin=&fromtag=50" data-musicid="213874992" class="music_card_thumb" alt=""> </span> </span> </span></section>
</section>
</foreignObject>
<!-- 隐藏第一张图片的动画 -->
<animate attributeName="opacity" begin="touchstart+0.3s" dur="380s" keyTimes="0;0.0009;1" values="1;0;0" fill="freeze" restart="never"></animate>
</g>
</svg>
</section>
<!-- 控制点击区域大小 -->
<section style="height: 0px;margin-top: -2px;line-height: 0;font-size:0;pointer-events: none;transform: rotate(180deg);" data-share="公众号：懂点君">
<svg style="transform: rotate(180deg);" viewBox="85 0 830 1905" xmlns="http://www.w3.org/2000/svg">
<path fill="#000" opacity="0" style="pointer-events: visible;" d="M-0,0v1890h1100V0.5H-0.5z M600,1600H374v-409h252V1591z"></path>
</svg>
</section>
强力驱动