Axure教程-锚点滚动效果

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

下载地址

http://pan.baidu.com/s/1o6kjpxS

实现目标

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

实现步骤

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

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

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

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

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

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

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

菜单1鼠标单击时:

菜单1鼠标移入时:

菜单1鼠标移出时:

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

效果出来了:

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

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

推荐阅读更多精彩内容

  • 【说明:本文是从Principle官网翻译过来的,因个人能力和水平有限,部分术语可能不准确,对软件功能的理解也可能...
    shea阅读 42,765评论 23 117
  • 这里我就用一个主界面和多层的动态面板内嵌(只是钻研和加深交互练习,平常还是跳转链接更方便)。演示一下关于QQ界面的...
    夏天灬阅读 7,916评论 0 7
  • 姗姗带团到我们市,在群里呼了一声说要聚聚,我和糖糖、小米几个就炸开了锅,便约定好了时间和地点,因为我们太长时间没聚...
    张小煜阅读 4,062评论 0 3
  • Apple的文档很清楚地说明了initialize和load的区别在于:load是只要类所在文件被引用就会被调用,...
    linbj阅读 1,176评论 0 1
  • 诗歌三人行 秋天的别离 文/李明利 山与山以一种高度,分离于谷地 天地阔别,如清晨与黄昏 秋天,徘徊在南去北往的归...
    创作你的创作阅读 3,177评论 0 1