【axure】axure实现导航栏吸附与锚点滚动效果

大多数网站都有导航吸附效果,即导航栏固定在网页顶部,不随鼠标滚动而移动;还有就是锚点滚动效果,即点击某个按钮,页面直接滚动到相应内容区域。今天就写一下如何使用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~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容