《Axure实现网站Tab导航栏切换内容页和返回顶部交互操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强交互产品,页面,切换等多维度案例或实操来进行更多的学习;此教程是由Baolan子在2021-08-26发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
本文介绍如何通过Axure实现网站Tab导航栏切换内容页和返回顶部交互?希望看后对你能有所帮助。
我们在使用知乎时,会发现向下滚动页面,网站Tab导航栏会发生内容切换;同时滚动超过一定距离,会出现回到顶部按钮,点击该按钮,即可返回页面顶部。
顶部栏两种状态及下滑页面准备,我是通过截图的方式准备的:
回到顶部按钮、鼠标移入按钮时所显示的浮窗,将该组合命名为“回到顶部-总”:
将顶部栏的两种状态分别放入动态面板中的状态1与状态2中,将动态面板命名为statusBar;
添加鼠标移入回到顶部按钮显示”回到顶部”气泡:
添加向下、向上滑动页面,顶部状态栏切换;
其次,对窗口添加交互:
将“回到顶部-总”组合转为动态面板,将该动态面板命名为“回到顶部-总panel”,固定动态面板显示位置,并隐藏:
添加锚点元件,我们在此选择热区元件,因为热区具有透明的特性,将其命名为TopLocation:
在上面交互的应用中,我们会用到Window.scrollY函数,该函数为窗口函数;窗口函数一共包括以下四种:
以上就是Axure实现网站Tab导航栏切换内容页和返回顶部交互操作实例的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 axure9全局变量和局部变量的应用情况及操作实例
> 下一篇 Axure教程:后台产品导航栏
2022-06-17 09:39
2022-01-27 11:04
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论