Axure——选项组实现翻牌效果,菜单栏下拉效果

案例一:
实现顶部菜单栏下拉效果:
Axure——选项组实现翻牌效果,菜单栏下拉效果_第1张图片
1、设置两个矩形,各自覆盖到对应的菜单选项上面,并设置名称
Axure——选项组实现翻牌效果,菜单栏下拉效果_第2张图片
2、框住这俩控件,然后设置选项组名称,选中效果
Axure——选项组实现翻牌效果,菜单栏下拉效果_第3张图片
3、设置交互样式(鼠标悬停时候显示边框,选中时候显示背景和边框)
Axure——选项组实现翻牌效果,菜单栏下拉效果_第4张图片
4、设置各自对应的交互事件(鼠标单击时候设置选中状态为toggle,选中时设置对应菜单栏显示向下的滑动,取消选中设置向上滑动的隐藏)
Axure——选项组实现翻牌效果,菜单栏下拉效果_第5张图片

Axure——选项组实现翻牌效果,菜单栏下拉效果_第6张图片

案例二:
后宫翻牌
Axure——选项组实现翻牌效果,菜单栏下拉效果_第7张图片
1、先设置四个默认背景图和四个按钮
2、将4张美女图片覆盖在背景图上面并隐藏。
3、四个按钮框住设置选项组,设置选中交互样式,选中为高亮显示
4、对每个按钮进行交互事件设置,鼠标单击时设置选中为toggle。
选中时显示美女,取消选中时隐藏美女。

Axure——选项组实现翻牌效果,菜单栏下拉效果_第8张图片
Axure——选项组实现翻牌效果,菜单栏下拉效果_第9张图片

你可能感兴趣的:(Axure——选项组实现翻牌效果,菜单栏下拉效果)