比悬浮弹窗还有趣，6种方向点击移入再点击移出！

原创赞收藏评论

举报 2022-09-09

扫描,分享朋友圈

周一讲了在图文中给地理位置添加封面的方法，有小伙伴来问：
「能不能点击地图的某个位置，出现对应的图片？」

这和地理位置组件就没有什么关系了，那方法可太多了，像点击弹出图片、点击悬浮弹窗都可以，这两个效果之前也写过相关教程（点击蓝字查看）。这次咱再推荐一个之前没说过的效果——点击移入点击移出，我乐家居的一个案例无论在素材还是交互上都很符合小伙伴的需求，大家点击试试：

点此查看原文

点击某一位置图片移入，点击另一位置图片移出。该效果不局限于点击地图出现图片的创意，在iPaiban Pro 黑科技编辑器中有6种方向的该效果组件，相信大家可以创造出更多有趣的创意玩法。 6种方向分别为：右进右出、左进左出、右进左出、左进右出、下进上出、上进下出、以右进右出为例，一起看下制作教程：

详细教程：

工具：iPaiban Pro黑科技编辑器，网址：x.iPaiban.com

组件：点击移入点击移出(右进右出)

编号：10854（组件）

第1步：选择组件

登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，直接搜索组件名称或编号10854，点击选择。
第2步：上传图片素材
分别点击右侧两个「换图」按钮上传点击前和点击后的图片。两张图片尺寸需保持一致，点击移入图片后如果想要露出点击前的图片，点击后的图片设计成背景透明的即可。 第3步：设置触发区域及动画时间

双击编辑区图片，会出现一个触发区域调整窗口。 红色色块为点击移入的触发区域，点击移出的区域不用另外调整，红色色块外的区域即为点击移出的区域。但我们在设计图片时可以为点击移入和移出都设定一个特定的小按钮，以避免用户误触。

右侧动画时间为移入和移出的时间，滑动滑杆调整。

注意该效果不能直接在编辑器预览，我们点击最右侧「预览草稿」后可以手机扫码预览。

第4步：导入公众号后台

效果满意后接着点击「同步至微信后台」同步到自己的公众号就可以了。

局部导入可参考：《iPaiban Pro小助手v2.0安装和使用教程》

制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。

新用户在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。

本内容为作者独立观点，不代表数英立场。
本文禁止转载，侵权必究。