快好知 kuaihz

Axure教程:导航栏和广告悬停效果制作

这篇文章,手把手教你如何用Axure做出:“任随窗口滚动,而导航部分卡片保持不动,(即卡片始终悬停在指定的位置)”的效果。

如黄色框始终悬浮效果。

只需要一个事件:3个步骤。

第一步,做好导航菜单项部分,然后全选住,点击右键”转换为动态面板”,并在右侧的元件命名处,命名为title。

第二步:做好下面的主体内容部分。(我用图片占位符和矩形,随意表示一下主体内容部分)

第三步:设置窗口滚动事件:

(1 ) 在页面下的“页面交互”选项卡下找到“窗口滚动时”事件。

(2)然后按照下图中的数字顺序1->2->3->4->5点击选择设置:

(移动—勾选动态面板title—-选择“绝对位置到”)

点击第二个fx(y坐标对应),弹出“编辑值”窗口。

点击“插入变量”,选择  Window.scrollY。

(变量框内容:删除前面的0。最终效果是[[Window.scrollY]])

(变量框内容:删除前面的0。最终效果是[[Window.scrollY]])

确定事件。

预览或生成一下,就能看到你想要的效果,任你页面内容有多长,title部分内容始终在上头屹立不动。

这样的方式还可以做到任意位置,如在页面旁边放广告,只要你设置好绝对位置的y坐标轴,任你窗口如何滚动,小广告始终安静地悬挂在那里。

事件:窗口滚动时 移动  某个元件(内容生成的动态面板或小图片)绝对位置到 y:fx  。

设置  fx通常有以下几种结果:

[[Window.scrollY]]

[[Window.scrollY+200]] ( 200为举例,坐标根据实际情况定)。

下面试试做个右侧悬浮不动的小广告吧~~~

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:悬停  悬停词条  效果  效果词条  导航  导航词条  制作  制作词条  教程  教程词条  
原型

 Axure RP官方教程翻译(4...

鉴于有时候篇幅短小,所以这次一次性整合了5篇上来,原教程共有18篇,已经到第8篇了!这里十分感谢已经给我打赏和将来要给我打赏(笑脸^_^)的朋友,这确实让我有种...(展开)

原型

 如何优雅地做一个抽奖转盘

之前出了一个帖子如何让你的原型图动起来,很多童鞋问我抽奖转盘是怎么做的?今天抽空跟大家聊聊。(视频第22秒见效果)这个是用Axure7.0做的,稍后介绍一下使用...(展开)

原型

 Axure原型 | O2O订单流...

翻出了一年半前写的一个订单流程的稿子,写的很粗糙,但大体流程表现都比较清晰,由于是写着玩的自然没有需求规则,现在拿出来分享给大家,供学习交流!整体预览:动画预览...(展开)