axure7.0教程_小楼作品(十二)HTML5多级锚记_window函数之ScrollY

AxureRP7.0教程 小楼一夜听春语 15625℃ 0评论

这篇教程我要给大家讲的是,Axure rp7.0中window函数的应用,window函数包含了几个函数,有兴趣的可以去看axure7.0教程_小楼作品(八)元件函数、窗口函数、鼠标函数和数字函数的介绍

今天,我们先讲一下window函数属性之一ScrollY(纵向滚动)的使用方法。那么,结合scrollY我们来尝试实现Html5网站中,右侧锚记的效果。不清楚的可以去找一些Html5的网站看一下。用语言来描述就是在网站的右侧几个圆点,每当向下滚动一页,相对应的圆点颜色会变深,点击其中任意一个圆点时,会滚动到页面相应的部分。

本教程示例原型下载:axure7.0教程_小楼作品(十二)HTML5多级锚记.rp

好了,我们开始准备元件,来实现这个效果!

1、  右侧的锚记圆点我们准备4个,分别代表第一、二、三、四页;

2、  左侧拖入5个文本面板,分别放在每一页的起始位置,这里设置每页高度600px,也就是说页面一的文本面板坐标0,0,页面二的文本面板坐标0,600,页面三的文本面板坐标0,1200,页面四的文本面板坐标0,1800,最后一个文本面板作为页面底部,坐标0,2400;

12-10 12-9 12-8 12-7 12-6

3、  把每一个元件都设置好标签,以便添加事件时易于查找。

只需要这些元件我们就能够实现效果了。

下面开始说实现思路:

1、  每一页圆点颜色变深,可以用动态面板多状态切换来实现,我们先把四个圆点全部选中,然后转换成动态面板。之后,我们再给动态面板多添加3个空状态,不要用复制;

12-3

2、  然后我们打开状态1,分别给每个圆点添加点击事件,由上到下进行分别添加2个事件:

12-4 12-5

事件一、点击时切换到指定状态,第一个设置为切换动态面板到状态1,第二个设置为动态面板切换到状态2,依此类推

事件二、点击时滚动到部件,第一个设置为滚动到第一页的文本面板,第二个设置为滚动到第二页的文本面板,依此类推。

3、  全部设置完后,我们全选四个圆点复制,然后粘贴到其他的三个状态里,并在粘贴完后,依次在每个状态里改变相应圆点的颜色,至此动态面板设置完毕。

4、  在页面交互(编辑器底部)事件中,有一个窗口滚动时的事件,在里面我们分别添加滚动到每一也时动态面板的状态切换:

用例1:滚动小于600时(第一页,[[window.scrolly]]<600),切换动态面板为状态1;

用例2:滚动大于600并且小于1200时(第二页,[[window.scrolly]]>600 and [[window.scrolly]]<1200),切换动态面板为状态2;

用例3:滚动大于1200并且小于1800时(第三页,[[window.scrolly]]>1200 and [[window.scrolly]]<1800),切换动态面板为状态3;

用例4:滚动大于1800时(第四页,[[window.scrolly]]>1800),切换动态面板为状态4。

12-1

5、把动态面板固定到浏览器,这里我们让它在右下角。

12-2

全部完成后,下面就是见证奇迹的时刻!你做对了吗?


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师全新打造Axure RP 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


转载请注明:Axure原创教程网 » axure7.0教程_小楼作品(十二)HTML5多级锚记_window函数之ScrollY

喜欢 (9)or分享 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 头像
    小楼老师,这一节教程让我学习到scrollY函数结合锚记可以实现页面关联锚点关联切换的原理。我想提问,是否可以用window.scrollX公式实现APP软件中,引导页面的左右切换功能呢?如果可以,又该怎么实现呢?因为如果提前限定了手机屏幕的话,就不是用整个界面作为参考,scrollX该怎么和手机屏幕宽度关联呢?
    张小萌2013-08-19 17:53 回复
  2. 头像
    我觉得app中最好是使用拖动的事件,和dragX、dragY两个函数,关于这两个函数,见6.5的教程。
    小楼一夜听春语2013-08-19 18:06 回复
  3. 头像
    Axure 8 条件设置中有“元件范围 接触/非接触 元件范围”这个条件,应该可以更便捷的解决这个问题。 但试了一下,无法触发,不知道是什么问题。
    Eric2015-10-15 16:21 回复
    • 头像
      我也发现了这个问题,在窗口滚动时,axure8 无法判断两个元件是否接触(一个固定的、一个随页面滚动),而当拖动一个元件去接触另一个时,axure8可以判断是否接触。 很奇怪这个问题在官方博客似乎也没人提及。
      biubiu2015-11-27 12:11 回复