当前位置: 首页> 建站经验

如何利用Axure RP8 教程┈┉实现高逼格的】面板切换效果呢?一起▶来文中看看~

浏览网页时,我们经常看ⓛ到整屏滚动效果的首页设计,如招♀商银行首г页:当℃鼠标ō上下滚动时,不同页⌒面进行翻页展示。

此教程将讲解如何实现◑↔↕▪此效果:

一、界面元件搭建

首先,拉入一个动态面板,命名为“内容”,再为其添加2个动态,为这三个状态面板的添加一些元件,┑(╞状态里面的元件内容随大家喜好自行添加,主要是演示面板的切换效果),本教程的动态面板界面效果Θ如下:Ы

预览效果如下:

二≤、交▄互事件实现

起初的想法,是想在【内容™】动态面板上,添加【向上滚动时】和【向下滚动时】的交互事К件▬;但是,由于面板的内容宽高是۩自适应的,没有出现滚动条,因此,鼠标ъ的╱╲滚动事件无▁▂▃▄法触发。

最后想到通过添加另一个动态▦▩面板,◇命名为【控制面板】,设置Γ宽高与内容面板一致,为其内容添加ю一个长高度Θ的热&区,即能使面板出现滚动条↕。再添加【向上滚动时】和【向下滚动时※】的交互△事件来控制【内容】动态面板的切换。效果如下:

接下来,我们只需要将此这控制◥面板的滚动条隐藏๑即可,实现方法为:将此动态面板再转化为в▼动态面板,⿱将此动态面板的宽度减少20,即少去滚动条的宽度。最终的实现效果如下:≦

&nb○sp;

作者:@火星人~艾斯⊙,公☼●·众号:艾斯的Axureα峡谷*

本文由 @火星人~艾斯 原创发布于人人都是产品经理。未经Ⅻ许可,禁止转载×╯╰

题图来自Unsplash,基于CC0协议