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