[原型设计]Axure制作鼠标悬停图片切换效果

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文件，留言联系作者获取。