大多数网站都有导航吸附效果,即导航栏固定在网页顶部,不随鼠标滚动而移动;还有就是锚点滚动效果,即点击某个按钮,页面直接滚动到相应内容区域。今天就写一下如何使用axure实现导航吸附与锚点滚动效果,tips:这里的重点元件是动态面板哦,大家可以留意一下~话不多说,先上效果图,如下:
具体步骤:
1.制作导航栏:在编辑区域拖入一个矩形作为导航栏背景,再拖入一个占位符、三个文本作为logo图片与导航按钮;为了保证导航栏在浏览器中为铺满效果,需为矩形背景设置onload事件,内容为:set size->window.width,同时为了保证logo图片与三个导航按钮的位置正确,需将其分别转换为动态面板并设置固定到浏览器,即:pin to brower ,如果对这部分内容有疑问,可以查看上篇文章《axure母版搭建Web后台基本框架》;同时可为三个导航按钮设置鼠标移入、鼠标按下、选中样式~导航栏效果如下:
2.设置导航栏吸附效果:将第一步中的所有元件全部选中,并转换为动态面板;然后右键选择固定到浏览器pin to brower即可,是不是很简单~到这里第一个效果就完成啦!
3.制作内容区域:在导航栏下方拖入一个动态面板,命名为content1,面板高度根据需要设置;在content1的state1中再拖入一个动态面板,命名为content2,面板高度根据需要设置,一般content2高度要大于content1;在content2面板的state1中拖入一个矩形,矩形中放三行文本,分别表示导航栏三个按钮指向的三个位置,如下图所示:
这里需要特别记录第二行和第三行文本的y坐标,“视频”文本对应的y坐标为500,"发现"文本对应的y坐标为860,第四步会用到。此时内容区域各元件对应的层级关系如下所示:
4.设置锚点滚动效果:选中导航按钮“首页”,为其添加onclick事件,内容为:move content2 to (0,0) & set selected,如下图所示:
同理,选中导航按钮“视频”,为其添加onclick事件,内容为:move content2 to (0,-500) & set selected,这里注意-500即为第3步中“视频”文字对应的y坐标~
同理,选中导航按钮“发现”,为其添加onclick事件,内容为:move content2 to (0,-860) & set selected。
为了使这三个导航按钮只能有一个出现被选中效果,需要选中这三个按钮并设置为选项组~设置选项组具体方法如果有疑问可查看上篇文章《axure母版搭建Web后台基本框架》。
全文结束,over~