这一期要教大家是通过鼠标滚轮来切换场景，之前就有很多群里的小伙伴问起过这个问题，那个时候忙着弄hype社区也没有太多的时间。关于hype，现在越来越多的用户群将他做为制作网页的工具。确实，用过之后你也会发现它的方便和好用之处，这里也就不一 一说明了。想要了解hype的小伙伴可以先看看中文介绍视频：http://v.youku.com/v_show/id_XOTI0NjY5NDg0.html?from=s1.8-1-1.2

随着大众审美观地不断提高，大家对网页的美观度的要求也在不断增加。随着HTML5单页面的不断流行，网页也呈现出了一些趋势。人们把他视作是一种简约大气的体现：(一)用户可以清晰的看到每一个单页面所要呈现的内容 (二)配上一些简单的动画效果，用户在阅读内容的同时，还增加了一些互动性。下面我找了2个类似的案例大家可以一睹为快。

http://www.uemo.net/        http://artool.me/#1

我们发现2个例子都是通过鼠标滚轮来控制页面的切换，如果在hype中也可以实现的话，那么制作类似的网页不就更得心应手了吗？不过在hype中并没有这种自带的功能，那么我们怎么来实现呢？hype被定义为是一个零代码的HTML5动效交互软件，但是他也提供了代码的支持，所以这就让事情变得简单多了。

话不多说，先附上了此次案例的内容页面吧，这是我之前做过的一个网站项目的首页。接下来我们就用这个页面来制作鼠标滚动切换场景的效果吧。

1.第一步很简单先设置场景的尺寸，大家自行设置把，页面需要几个板块就新增几个场景。时间关系这里我新增2个场景，将场景命名为1，2，3。这里我就直接切图了，因为我们这次主讲的是功能其他可能就一笔带过了，具体的大家可以自己去尝试下，有问题可以在群里或社区留言，我会给大家一一解决的。这里我用到了一个持久符号，选中头部栏目条，右键，将他转化为持久符号，我们发现，弹出一个框，需要我们选择，我们可以将这个元素只添加到当前场景或则添加到所有场景。如果你有元素需要显示在每个页面又可以同步进行修改的话你就可以通过持久符号添加到所有场景中了。之后我们会发现，场景2和3都已经出现了场景1中的头部栏目条了。之后我们将网页内容逐个拖入到对应的场景页中。（这里有一点很重要，就是你导入的图片不能以中文名称命名，这样会导致你导出预览的时候会发现图片不显示了，大家要记住）

2.这一部我们需要设置页面适配屏幕，我们要先将场景的宽度缩放开启，然后在可调布局中将双向箭头和图钉点亮，具体适配方法可以参照系列二教程。持久符号的话，只有符号内部的设置的动作才会在每个页面中同步，修改会导致所有场景中的符号都发生改变，而对符号的设置只会作用于当前场景，所有我们需要对每个场景中的持久符号都设置可调布局。在浏览器中预览一下，发现ok，可以适配屏幕。

3.这一步的操作我在系列一教程中就有讲解到，也就是调用jQuery这一块，大家可以去回顾一下。因为我们今天讲的功能就是调用的jQuery代码。我们先将jQuery库拖入到资源库中，选到场景1，添加场景加载时的动作，在操作一栏中我们选择运行javascript，在函数中选择新函数。之后会在导航栏中弹出第二个选项框。把我们将要执行的jQuery脚本代码复制到选项框的函数里面，这里我吧函数命名为scroll（命名这个随意啊）。因为我们是通过鼠标滚轮切换的场景，所以需要让每个场景加载的时候都执行jQuery脚本代码，那样当场景加载的时候，我们都可以通过鼠标滚轮来切换到不同的场景。因为之前已经将这个代码命名为scroll,所以我们在后面每个场景加载时都进行同样的操作就行了：运行javascript－选择刚才命名的函数就可以了。

这里有几个地方大家可以自行设置，一个是PushBottomToTop/PushTopToBottom：代表了切换的方式，第一个代表从下至上，第二个代表从上至下。另一个是后面紧跟的数字（0.5），代表了页面切换的速度值。大家可以根据自己的需求进行设置哦。

4.我们预览一下效果吧,gif可能不是那么明显，浏览器中预览效果还是很明显的。最后我会吧这次做的案例也上传上去供大家下载学习。过程中如果遇到问题的话可以在hype社区中（design968.com）发帖留言，或者在hype3学习交流群，一群已满，二群：572797151 中留言。

欢迎关注微信公众号design_bar，让你第一时间得知hype的最新动态和hype教程的更新