在文章《2025年12月品牌SVG交互图文Top30》中，QQ浏览器的一个案例，有点小萌。
每个小格子都能点击，点击后出现对应的图片又会自动消失：
*素材来自QQ浏览器这46个AI工具，治好了我99%的生活小问题
之前在教程戳戳戳戳戳戳戳戳戳戳戳戳泡泡给大家介绍过看着差不多的排版：
*素材来自局部气候调查组《「送你一张泡泡纸」》
实际两者有很大的不同，戳泡泡这个点击切换都只在对应的小格子中变化，而QQ浏览器的点击出现的图片不会局限在对应的小格子里，那么两者实现的方法就不同了。
QQ浏览器的效果用一个组件就能实现，下面一起看下排版教程吧。
详细教程：
工具：iPaiban Pro黑科技编辑器，网址：SVG.iPaiban.com
组件：点击切换-自动恢复(多触发区)
编号：11758（组件）
第1步：选择组件
登录 iPaiban Pro 黑科技编辑器后，点击编辑器左侧「组件」按钮，在「点击」分类中找到「点击切换-自动恢复(多触发区)」组件，或者在组件中直接搜索编号11758，点击选择。
第2步：上传图片素材
点击右侧「换图」按钮上传背景图，点击「+」号上传多张切换图。所有图片尺寸保持一致。
第3步：调整动画参数
一个是点击后出现另一张图片花费的时间（动画时间），一个是切换后的图片在消失前显示的时间（显示时间）。
动画时间一般默认1s即可，显示时间大家可以预估下用户阅读完切换后的图片需要多长时间，然后进行调整。
第4步：调整触发区
双击编辑区上传的图片，在弹出的窗口中一一摆放图片对应点击触发的区域。
第5步：导入公众号后台
点击最右侧「预览草稿」可随时扫码预览效果，效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。
使用同步功能可以不用频繁在编辑器和微信后台切换，同步成功后可以立即扫码预览二维码查看。
如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。
