1、新建Axure Pr项目,取名“Axure制作鼠标悬停图片切换效果”。
2、找一个网站首页获取所需素材,以下素材来自新浪首页,图片大小360*272px。
3、从控件苦Widgets拖拽一个动态面板控件Danamic Panel到Home首页,取名“鼠标悬停”,并通过“+”号添加三个状态,分别取名为图片、专栏、热点(状态数量与鼠标悬停效果图片数量对应)。
4、设置动态面板“鼠标悬停”的大小为360*272px。可以通过标题栏的坐标设置,也可以鼠标拉拽动态面板框。
5、在Home页选中动态面板“鼠标悬停”,在右下角Widget Manager栏分别双击图片、专栏、热点三个状态。
6、分别双击图片、专栏、热点状态进入状态编辑页,分别将获取的素材图片添加到状态中。直接将图片从文件夹拖拽到状态页,也可以通过Widgets控件栏拖拽一个Image控件到状态页,然后再添加图片。
7、回到Home首页,从Widgets控件栏拖拽三个Hot Spot热点控件,分别覆盖图片、专栏、热点三个鼠标悬停区域。并分别为三个Hot Spot热点控件取名为图片、专栏、热点。
8、分别为三个Hot Spot热点控件取名为图片、专栏、热点设置鼠标悬停事件,从Interactions栏分别为热点控件添加OnMouseEnter或者OnMouseHover事件,事件设置操作为Set Panel State为热点对应的状态。此外,可以自行设置状态切换方式Animate In 和Animate Out。
9、按F5执行查看效果
如需源文件及素材留言评论找小编获取。
如需素材包及rp文件,留言联系作者获取。