在学习Axure做一些网页的交互时候,往往会遇到很多的问题,在为一个模块做交互的时候,我发现先要为实现这个交互理一个思路,如何实现这一交互的思路,作为一个前端新人来说,只要能实现的效果我已经非常满足了。
一、为不同颜色的花换不同的花瓶
首先,我们先为实现这一效果理一个思绪:
1.先给这一效果进行布局,将白色的花不同的花瓶和红色的花不同的花瓶分别设置一个动态面板如图(1.1
2.放入俩个矩形分别为玫瑰花、茉莉花,在它的旁边再给一个矩形选择它的形状(如图1.2),在对话框矩形中放入俩个矩形填充颜色用相同的方法给它们标注,这里要给玫瑰花矩形一个移入事件如图(1.3)
这里为移出移入时显示和隐藏颜色框,在为每种不同的花瓶给一个矩形将照片给入如图(1.4),为它设置一个移入移出事件(1.5),
这种不同的花换瓶子的原理,大致就是将4张图片两两显示隐藏,这样就可以达到选择什么颜色进行换花瓶!
二、如何达到选中后下方的位置条跟着一起动
这一效果一般是在一些新闻类的网站,一些动态新闻的使用。大致效果是我鼠标左右移动,下方的矩形条跟着一起一起移动,并且矩形出现被选中状态。
1.首先布局,我们使用3个相同的矩形紧密排列,设置它们的选中状态。同时给他们移入事件,移除事件
在这里我们要给它一个移动的绝对位置,就是你选中的当前元件的x轴,和y轴加上当前原件的位置离移动的长条的位置,就可以实现鼠标到哪儿长条到哪儿。