美文网首页
基于Axure RP8实现的一些简单交互

基于Axure RP8实现的一些简单交互

作者: Ra_b7df | 来源:发表于2018-08-27 08:59 被阅读0次

    Tab选项卡实现

    如何实现如下图所示点击a,b,c三个按钮实现上方图片的切换

    (1)首先我们先放置三个矩形框建立整体布局

    (2)在大的矩形框上面放置动态面板,这是实现图片切换的重要条件(实现banner轮播同样需要这一步骤),本次例子是实现三张图的切换,所以再增加两个状态,点击右下角动态面板点击加号添加状态,如下图所示操作

    (3)添加完三个状态后,为每个状态添加一张图片,例如双击state1进入面板状态state1,然后添加自己需要的图片,如下图操作,state2,state3操作同上

    (3)接下来我们再来设置a,b,c三个切换键,为了使页面加载完a切换键就是黄色并且点击任意切换键该切换键会显示黄色,我们来进行如下操作:设置a键,将属性框下的选中勾中(为了实现页面加载完a键就显示为黄色),然后点击鼠标按下设置事件,设置填充颜色,点击确定,设置完成。b,c键除了不勾选中外,剩下的和a键操作相同。

    (4)接下来实现点击三个按键后图片进行切换功能,还是先设置a键,在右边属性栏交互事件里双击鼠标单击时进入事件编辑,如下图,点击设置选中,将abc三个矩形选中,a为true,其他两个为false(设置b键b为true,设置c时c为true其余为false),设置完后再设置面板状态,具体操作如下图,在a键设置下,选择状态为state1,进入动画退出动画按自己的喜好选择,bc键设置下选择状态分别为state2,state3

    (5)通过以下设置,这个交互事件设置也就完成了,按下F5可以进入网页查看设置后的效果。

             感谢查看,如有错误和意见请大家多多指点!

    相关文章

      网友评论

          本文标题:基于Axure RP8实现的一些简单交互

          本文链接:https://www.haomeiwen.com/subject/bdnmiftx.html