axure如何实现上下滚动效果(Axure教程-锚点滚动效果)

人人都是产品经理社区推出产品经理培训课程,让BAT产品总监手把手带你学产品吧!

今天给大家分享一个axure案例,锚点滚动效果,看到名字,大家可能觉得有些陌生,相信这个效果大家并不陌生,在许多html5的网站都有用到,下面直接上示例原型下载地址。

实现目标

点击导航条不同的菜单,页面跳到菜单相应的位置,实现页面自动滚动。

实现步骤

1. 拖入编辑区3个矩形,并相应命名为菜单1,菜单2 ,菜单3,每个矩形都单击右键—转换—转换为动态面板;

axure如何实现上下滚动效果(Axure教程-锚点滚动效果)(1)

2.双击其中一个动态面板设置标签为“菜单1”(可随便命名),点击 号,添加状态,并将其命名为nomal,click,hover分别表示正常,点击,鼠标移动的状态,其他的菜单动态面板相应的编辑;

axure如何实现上下滚动效果(Axure教程-锚点滚动效果)(2)

3.拖入编辑区4个矩形,并相应命名为菜单1,菜单2 ,菜单3代表所在板块,在用一个大矩形包含,代表整个页面内容,大矩形单击右键—转换—转换为动态面板;

axure如何实现上下滚动效果(Axure教程-锚点滚动效果)(3)

4.双击动态面板设置标签为“页面”(可随便命名),状态命名改为正常;将动态面板“页面”再转成动态面板“内容”;

axure如何实现上下滚动效果(Axure教程-锚点滚动效果)(4)

5.单击动态面板“内容”,设置属性中的滚动栏改为按需显示纵向滚动条,样式的高度改成300;

axure如何实现上下滚动效果(Axure教程-锚点滚动效果)(5)

axure如何实现上下滚动效果(Axure教程-锚点滚动效果)(6)

6.设置三个菜单不同状态的样式,包括:nomal,click,hover,以菜单1为例;

axure如何实现上下滚动效果(Axure教程-锚点滚动效果)(7)

axure如何实现上下滚动效果(Axure教程-锚点滚动效果)(8)

axure如何实现上下滚动效果(Axure教程-锚点滚动效果)(9)

7.设置菜单时间,单击时,鼠标移入,鼠标移出;

菜单1鼠标单击时:

axure如何实现上下滚动效果(Axure教程-锚点滚动效果)(10)

菜单1鼠标移入时:

axure如何实现上下滚动效果(Axure教程-锚点滚动效果)(11)

菜单1鼠标移出时:

axure如何实现上下滚动效果(Axure教程-锚点滚动效果)(12)

菜单2,菜单3与菜单1一样,但是鼠标单击时还需要加上页面上移的动作,上移多少根据菜单2板块的高度定,比如例子中就是上移300,而且选择绝对位置:

axure如何实现上下滚动效果(Axure教程-锚点滚动效果)(13)

效果出来了:

axure如何实现上下滚动效果(Axure教程-锚点滚动效果)(14)

你的效果出来了吗?好啦,今天的分享结束了。谢谢大家!

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页