悬停展示
可交互效果预览

制作过程:

1.点击新增楼层,选择「多状态切换」,添加一个多状态切换楼层。

8353dd7ceb8318d41c8824b34a9c958b.png

2.右侧属性中默认状态选择「图片容器」。

3c1dea9371bf901f038dbc583a2ffd61.png

3.点击进入默认状态,「点击上传图片」上传背景图。

de2af3cbc56790a27347103ee0a4d19d.png

4.点击「添加状态」可出现「状态1」和状态1的触发热区,调整触发热区的大小和位置,选择状态1的类型为「图片容器」。

7d3fdd5f9a7efc93bf69b9562a42dbfb.png

5.进入状态1,「点击上传图片」再次上传底图。1789538132526_1E6C4544-CFCA-4787-B8D8-1C879F1B00B0.png

6.点击「添加热区」选择「添加图片热区」。92728e145d7cb629943a6e9a23c96bea.png

7.点击「上传悬停图片」上传想要悬停展示的图片(此案例中悬停图片为单张证书图片),「效果」选择「无」,调整图片热区的大小和位置,第一种状态即设置完成。

1789538586480_A4E3354A-0774-46a5-BCC3-5A6E7E2B76E6.png

8.重复步骤4「添加状态」操作可添加多个状态,上传每种状态图片,调整每个触发热区至合适位置,「触发方式」可选择点击或悬停,「默认展示」按钮可将当前状态设为默认状态。

39c3dbe8bc7bfddeb82ec2344a3ee1ae.png

9.右侧属性底部「高级」选项中可设置多种状态切换时的动画效果,也可设置鼠标移出触发热区后是否恢复默认状态。

2e9c31ebda75d125911c341be59e46b5.png