Hype如何使用鼠标滚轮来切换场景

随着HTML5单页面的不断流行，用户在阅读内容的同时，还增加了一些酷炫的互动，比如鼠标滚轮切换场景，这慢慢成为了时下的流行趋势，但是Hype内部并没有此功能，此时要怎么做呢？

虽然当前的Hype尚未完全提供支持鼠标滚轮触发事件功能，但是Hype为用户提供了编写JavaScript函数的入口，有了它，就等于有了无限可能，下面小编使用Mac系统下的Hype 4版本针对这个问题，为大家解答疑惑。

一、场景部署

第一步：在场景检查器中，设置场景的大小为“1920px * 738px”，因为这个宽度能够刚好插入小编准备好的图片，然后勾选上“将更改应用至所有场景”，如下图1。

图1：设置场景属性

第二步：在Hype左侧场景列表中，创建三个新的场景，分别命名为1,2,3。然后在Hype上方元素按钮中，选择“图像”，分别为以上三个场景插入三张图片，调整图片的位置覆盖整个场景即可，此时的场景列表如下图2。

图2：场景列表展示

下面图3、图4、图5是小编为大家准备好的场景图片资源。

图3：场景1图片资源

图4：场景2图片资源

图5：场景3图片资源

第三步：在“元素”按钮中，往场景1中加入一张顶部菜单图像资源，作为网页的顶部菜单，图像资源准备如下图6。

图6：顶部菜单图片资源

第四步：使用鼠标快速调整顶部菜单图像在场景1中的大小和位置，调整完成以后的场景1如下图7。

图7：调整后的场景1

第五步：由于是顶部菜单，如果场景1的顶部菜单修改了，场景2的顶部菜单也应该随之进行改变，想要达到这种效果就需要用到Hype的“持久符号功能”。选中场景1的顶部菜单图像，右键点击它，然后选择“转换为持久符号”，如下图8，再在弹出的弹框中，选择“添加到所有场景”，此时场景2和场景3也会出现顶部菜单了。

图8：转换顶部菜单为持久符号

二、设置滚轮切换场景

由于鼠标滚轮是Hype目前暂不支持的功能，所以想要完成这一功能，也只能从自己编写一个简单的JavaScript函数入手。

第一步：在“场景检查器”中，设置“场景加载时”的操作为“运行JavaScript”，函数选择“新函数”，如下图9。

图9：场景加载时运行JavaScript

第二步：在新打开的新函数界面上，编写JavaScript函数，函数内容如下图10。

图10：编写鼠标滚轮切换场景JavaScript函数

图10的函数中主要包括了scroll和scrollScene两个方法，scroll方法是为了禁用浏览器自带的鼠标滚轮事件，浏览器自带鼠标滚动时页面会向下滑动一点点，这个自带功能是需要被禁用的。scrollScene方法作用是捕获鼠标滚轮的方向是向上滚动还是向下滚动的，然后按照滚动的不同方向，切换到上一个场景或下一个场景，主要使用到Hype内置的“showNextScene”函数和“showPreviousScene”函数，关于该函数的使用方法，如下图11所示。

图11：切换场景函数使用方法

该函数有两个参数，第一个参数表示切换场景时的动画效果，第二个参数表示切换场景动画的时间，小编在图10函数中设置时间为0.5，有个动画效果的展示网页效果会更好。

以上就是关于如何使用鼠标滚轮切换网页场景页面的动画效果教程了，大家可以点击Hype上方的“预览”按钮预览网页效果，当然，除了本教程以外，还有许多有用的教程也发布在城东书院网站上，欢迎大家前往关注学习哦。