【请教】滚动页面切换内容滚动窗口鼠标滚动全屏滚动

bfcad1 · 发表于 2014-10-22 00:39:02

大家好
想請問使用axure要怎麼製作出「用滾輪往下滾切換到下一頁」的效果
用dynamic panel試了好久試不出來
網頁範例如下：
http://www.ford-event.com.tw/#1
還請不吝賜教，謝謝！

尹广磊 · 发表于 2014-10-22 15:28:34

axure里没有鼠标滚动的触发事件，有窗口滚动时的事件，但是功能有限，
直接想用滚动鼠标就做出这样的效果用axure还做不出。

但是，用在面板上，上下拖动的方式可以做出这样的效果。
需要借助鼠标坐标点的变化来判断是向下拖还是向上拖。

演示效果：

上下拖动切换面板内容.rar (429.06 KB, 下载次数: 113)

rp源文件：

上下拖动切换面板内容.rp (65.8 KB, 下载次数: 182)

bfcad1 · 发表于 2014-10-22 22:02:55

謝謝您的回覆與提供的範例，受益良多！
不過有在網路上也找到這個範例（如下方連結），看起來不是用鼠標滾動的觸發事件，但卻有類似的效果
仔細看其中有使用一些看不懂的語法，像是：
[Window.height*4]]、[(Window.scrollY/Window.height).tofixed(0)+1]]
如果您看了之後有任何想法還請指教，謝謝！

https://www.dropbox.com/s/lfuiyb ... B6%E6%80%81.rp?dl=0

尹广磊 · 发表于 2014-10-23 14:40:46

嗯，这种方法不错。

Move (Hot Spot) to (0,[[Windows.height*4]])
是让左上角的小热区移动到一个页面下方的坐标位置，
这是为得让页面撑长，这样窗口才会有滚动条。
其中Windows.height是axure里可以使用的函数，调用窗口的高度。

其中if "[[Window.scrollY" is less than text on (Shape)
是判断窗口滚动的距离是不是小于矩形的高度，其中Window.scrollY是窗口滚动距离的函数。

其中[[(Window.scrollY/Window.height).tofixed(0)+1]]
是总滚动距离除上窗口高度，以计算滚动超过了几屏，
其中的tofixed(0)是其中除后结果的整数位。参考链接

老许1859 · 发表于 2015-3-13 11:10:23

if 部件文字 (形状) = "状态一" 这个状态一是哪里来的，没有这句话，页面也没办法滑动

老许1859 · 发表于 2015-3-13 11:13:29

针对的是鼠标滚动效果，其他地方的语言都了解了，就这个搞不懂

老许1859 · 发表于 2015-3-13 14:05:05

这个状态一，就是页面里面的图形，有点懂了

smor · 发表于 2016-6-25 18:59:19

我说下我的思路：
可以将动态面板的大小调整得超过界面显示的范围，然后显示出垂直滚动条，里面放一个超过动态面板范围的透明矩形，然后设置动态面板对应的滚动事件；
这样做的用意就是让动态面板能够有滚动条，因为只有有滚动条的动态面板才能滚动，同时为了不让这个滚动条影响界面的视觉（比如说加上主窗口的滚动条会出现双滚动条），调整动态面版的范围超过界面视觉窗口的范围，就能起到隐藏动态面板滚动条同时触发滚动事件的效果；

我做的实例是用滚动鼠标来切换一个矩形区域的显示/隐藏，完美符合预期，所以这个做法应该是有可行性的；

【请教】滚动页面切换内容 滚动窗口 鼠标滚动 全屏滚动

【请教】滚动页面切换内容滚动窗口鼠标滚动全屏滚动