全屏滚动插件fullpage的使用

1.fullpage插件简介

fullpage是jQuery的插件，可以方便的实现全屏滚动的效果。

因为fullpage是jQuery的插件，因此在使用fullpage的时候需要引入jQuery

使用fullpage插件实现全屏滚动效果的优点

          1.相对于原生js来说更加的方便、快捷

          2.相对于原生的js而言可以更好的兼容各种版本的浏览器

2.fullpage的使用步骤

使用fullpage的三个步骤

 2.1 引入jQuery fullpage的css和js文件

 2.2 编写需要的全屏滚动的骨架（注意：id 和class样式名不可修改）

  <div id="fullpage">

    <div class="section section1">第一屏</div>

    <div class="section section2">第二屏</div>

    <div class="section section3">第三屏</div>

    <div class="section section4">第四屏</div>

</div>

 2.3 使用js函数初始化执行

  $(function () {

$('#fullpage').fullpage();});

经过三个步骤之后，页面呈现的效果如下：（为了页面的美观，给每个页面加了背景图）

image

3.第一屏布局

image

3.1 “直接进入购物中心”的小图片需要在右上角的位置，但是这个图片是每一屏都需要的一个小图片。因此可以设置在fullpage骨架之外的。在上面或者下面定义图片，然后使用固定定位的方式将图片定位到想要的位置即可。
<a href="#" class="go">
    <image src="images/t1ldiffkjfxxxzhxzd-101-101.png" />
</a>

如果将这段代码帖子fullpage的下面，显示的效果上就不会有什么问题。但是如果将这段代码帖子了fullpage的上面，就不会正常显示效果了。这是为什么呢？

因为图片的层级z-index为0，fullpage中设置的z-index也为0，后面会覆盖掉前面的，因此如果写在上面需要指定z-index:999

3.2 其他几个小图标用以上定位的方式即可。

3.3 动画效果

 可以看到上图中有图片的动画效果。动画效果使用的是CSS3的语法 animation 实现的。