• 湖北27条高速路段、近百个收费站因大雾临时封闭 东楚网 2018-03-28
  • 毛阿敏老公把中融信托卖了 中植集团这样回应 2018-03-28
  • 【“一带一路”福建篇】千年“海丝”梦 八闽山水长 2018-03-28
  • 2018年精神文明建设工作简报第2期 2018-03-28
  • 回到三国的无敌特种兵最新章节 2018-03-28
  • 俄罗斯购物中心起火 至少37人死亡69人失踪 2018-03-28
  • 莱州建设文峰路街道学校 改造地下综合管廊 2018-03-28
  • 完善医疗器械法规规章的相关建议 2018-03-28
  • 2018湖北省高考体育专业素质测试文件发布 2018-03-28
  • 首届全国禁毒微视频摄影大赛 2018-03-28
  • 兴文县2014年度财政预算执行和其他财政收支情况审计结果公告 2018-03-28
  • 新疆裕民县江格斯乡南村干部为村民争实惠 2018-03-28
  • 孙宏斌再次逼宫,二次动作直击监管层 2018-03-28
  • 这份权威的“旅行医学指南”,关键时刻能救命 2018-03-28
  • 2018江苏公务员招录笔试:平均38.5人竞争一个岗位——中国新闻网江苏 2018-03-28
  • 带有动态效果的返回顶部按钮

    腾讯分分彩4星漏洞 www.mfshiliao.com 这一篇Axure RP 8的教程,主要给大家讲一下Axure RP中和浏览器窗口相关系统变量的使用。

    主要会用到:

    • Window.scrollY:浏览器Y轴滚动距离
    • Window.height:浏览器窗口高度。

    当我把这个案例做完之后,我就忍不住出来浪了。

    大家看看效果,注意右下角的返回顶部按钮!

    虽然原型很粗糙(页面内容用一个矩形代替了),但是交互效果还是很有趣的。

    用有趣的原型帮助大家学习,是我一贯坚持的,挺不容易...挺起来不容易...坚持挺着更不容易...

    所以,如果觉得教程有趣,学爽了,就多叫几个女同学来吧!

    接下来,老套路,思路分析。

    问:用户做了什么?

    答:用户拉动了滚动条。

    问:给用户什么反???

    答:

    • 将返回顶部按钮固定在窗口的右下方,并且窗口发生滚动时,通过已滚动距离与可滚动的总距离的比例,控制返回顶部蓝色区域的高度,也就是让蓝色区域的最大高度乘以计算出来的比例。
    • 点击返回顶部按钮时,将页面滚动回顶部。

    提示:可滚动的总距离=页面总长减去窗口的高度

    好了,思路有了之后,我们进行元件的准备。

    1、页面内容用一个矩形代替,这里我用的高度为“2000”,宽度为“1200”。

    2、放入第2个矩形,作为返回顶部按钮(蓝色部分),设置好尺寸(这里是80*80)、边框颜色、填充颜色、文字与文字颜色。

    3、放入第3个矩形,覆盖在蓝色矩形上层,作为返回顶部按钮(白色部分),设置好尺寸(这里是80*80)、边框颜色、文字与文字颜色。

    4、将第3个矩形点中,然后点右键选择【转换为动态面板】,并命名为“White”,最后将动态面板“White”覆盖在蓝色矩形上方。

    为什么转换为动态面板呢?因为动态面板改变高度能够让白色矩形“White”只显示由上至下的一部分。

    大家可以手动调整高度试试看,是不是和目标效果一样?

    5、在概要中,按着Ctrl键将蓝色矩形和包含白色矩形的动态面板一起选中,然后再次在选中的元件上方点右键,选择【转换为动态面板】。

    为什么再次转换呢?因为要把它们统一固定在浏览器窗口的右下方。

    6、在页面的顶部放入一个热区元件,位置X轴位置随意,Y轴为0,然后命名为“Location”。

    这个元件用于点击返回顶部按钮时返回顶部的定位。

    完成元件准备之后,接下来,我们完成给用户的反馈,也就是交互。

    1、将返回顶部按钮固定在浏览器右下方,在最外层动态面板上点击鼠标右键,选择【固定到浏览器】(也可以在属性面板中设置),然后,勾选【固定到浏览器窗口】,选择“右”并设置边距为“20”,选择“下”并设置边距“20”。

    2、点击概要中的页面名称,切换到页面的属性面板,添加【窗口滚动时】的交互,设置动作为【设置尺寸】于动态面板“White”(注意不是最外层的动态面板),宽度保持“80”不变,高度设置为“[[80-Window.scrollY/(2000-window.height)*80]]”,其他设置保持默认。

    提示:关于高度的计算转换为语言就是“按钮高度-已滚动距离/可滚动总距离*按钮高度”。

    3、点中最外层动态面板,添加【鼠标单击时】的交互,设置动作为【滚动到元件<锚链接>】,目标元件选择“Location”,设置中保持默认的【仅垂直滚动】不变,动画设置为【线性】,时长“500”毫秒。

    到这里,我们就完成了本篇教程的案例。

    整个一遍做完,学爽了没?

    推荐关注:本站微信订阅号“iaxure”(二维码在本站页面右上方),及时获取本站最新动态内容。

    硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址【点此进入】。

    源文件下载:【点击下载

     


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

    小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

    《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


    转载请注明:腾讯分分彩4星漏洞 » 带有动态效果的返回顶部按钮

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

    表情

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

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址
    (10)个小伙伴在吐槽
    1. 一步步做出来了,感谢小楼老师
      柯布2018-03-02 11:26 回复
    2. 请问 你的说明中的橘黄色的线条 拿什么做出来的
      牛逼2018-03-06 16:53 回复
      • 小楼一夜听春语
        axure
        小楼一夜听春语2018-03-07 09:53 回复
        • 我怎么没有这个橘黄色的线条,需要下载原件库吗
          牛逼2018-03-08 10:12 回复
          • 小楼一夜听春语
            去学习入门手册
            小楼一夜听春语2018-03-08 11:20 回复
            • 好的 谢谢啦
              牛逼2018-03-08 13:35
    3. 设置white的高度和宽度时的 窗口滚动时哪个元件的 为什么我的只有滚动时 没有窗口滚动时
      米粒儿2018-03-13 10:06 回复
      • 小楼一夜听春语
        页面才有窗口滚动时
        小楼一夜听春语2018-03-14 08:19 回复
    4. 小楼老师,在“设置尺寸”时,把锚点改为“底层”、“左下角”或者“右下角”,做出的效果有问题。 上面一层的矩形在变小时,图形中的字会跟着下移。(若锚点选择“顶层”、“左上角”或者“右上角”,做出来没有问题。)
      追风2018-03-16 16:49 回复
    5. 小楼老师,我按照您的步骤做了,只不过返回顶部按钮设置成45*45,最后出来的效果,滚动鼠标到底部的时候并没有完全被覆盖,还剩下大概五分之一,也对比过您的文件,都没问题,不知道是哪里出错了.....
      Panther2018-03-19 14:08 回复