快好知 kuaihz

Axure教程:滑动鼠标页面自动切换(一)

浏览网页时,尤其是互联网产品介绍方面的网站,经常可以看到,当你的鼠标停留在某些页面时,只要轻轻滚动鼠标,页面就会自动切换,相较于传统页面的手动切换可以给用户更好的体验。今天就利用Axure8.0向下滚动的交互动作实现滑动鼠标页面自动切换效果跟大家分享一下。注意Axure7.0没有向下滚动的交互动作,请大家使用8.0进行同步操作。另外,我将使用几张图片来代替页面进行示范,当然你也可以直接使用页面。

原材料:

春夏秋冬四张动态面板以及向对应的tu1、tu2、tu3、tu4四张小图作为图示,注意四张小图合并在一起的高度要比单张动态面板的高度小。

方法/步骤

第一步:设置图示组和选中状态

同时选中图片tu1、tu2、tu3、tu4—属性—设置选项组名称输入“示意图”—选中—勾选线段颜色“黄色”—勾选线宽(选择较大宽度)—点击确定

选中tu1—属性—勾选选中(表示tu1在页面载入时默认状态为选中)

第二步:设置动态面板交互动作

依次选中动态面板chun、xia、qiu、dong,设置其向下滚动时(不同汉化版本翻译可能存在差异)的交互动作如下图。

第三步:设置图示的交互动作

依次选中图示tu1、tu2、tu3、tu4,设置其鼠标单击时的交互动作如下。也可以直接复制动态面板的向下滚动时的交互动作到图示的鼠标单击时,应用关系依次是chun—tu2;xia—tu3;qiu—tu4;dong—tu1.

第四步:调整元件大小和位置

依次选中动态面板chun、xia、qiu、dong,缩小其动态面板的高度,使其高度与四张小图合并在一起的高度一致。

依次选中动态面板chun、xia、qiu、dong,单击鼠标右键—滚动条—自动显示垂直滚动条;完成后你就可以看到动态面板右边有一条滚动条出现。

同时选中图示tu1、tu2、tu3、tu4,单击鼠标右键—顺序—置于顶层。

将动态面板xia、qiu、dong置于chun的下面,使四张动态面板完全重合地叠加在一起。同时,移动图示tu1、tu2、tu3、tu4到动态面板chun的右侧将其滚动条完全遮盖。至此,已经全部完成,如下图。

本文有一个很遗憾的地方,就是只能实现向下滚动页面自动切换,无法实现向上滚动页面自动切换。笔者尝试过使用同样的方法设置向上滚动时的交互动作,但结果是失败的,因为动态面板滚动条性质决定了在没有进行向下滚动时是无法进行向上滚动的。

笔者希望本文能对大家学习Axure起到绵薄之力,另外,若有哪位大神知道如何同时实现上下滚动页面自动切换的希望能告知一下,谢谢!

原型分享

链接:http://pan.baidu.com/s/1c2kI5AK密码:2nf3

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:滑动  滑动词条  切换  切换词条  鼠标  鼠标词条  页面  页面词条  自动  自动词条  
原型

 Axure教程:显示隐藏-灯箱效...

本文给大家分享下,在Axuere中,如何制作显示隐藏-灯箱效果-下拉菜单的弹出效果,一起来看看~Axure显示隐藏、灯箱效果及下拉菜单弹出效果,案例下载链接如下...(展开)

原型

 Axure原型设计学习路径图

对于一个新手来说,或者对一个桌面软件使用习惯不是很熟悉的人来说,学习一个设计软件似乎有点吃力,他们希望能有一个路径指导他们如何来学习,如何来使用,以便快速上手。...(展开)

原型

 穿梭器:双向列表带计数选择

前段时间分享过一个支持单选的穿梭器(列表框左右双向选择)案例,很多朋友觉得很赞,同时也想进一步学习并掌握支持单选、多选、全选的穿梭器交互制作。作者将通过这篇案列...(展开)