首页 > 代码库 > fullpage.js简单教程(一)

fullpage.js简单教程(一)

最近准备做一个全屏滚动的网页,在网上搜了一堆教程,结果大多都是一些很笼统的使用方法,对我这种耐心不超过3秒的笨蛋来说,很晦涩很笼统,所以打算边研究边自己写个教程,有什么不懂的,我再回来翻看笔记也方便O(∩_∩)O哈哈~

经常看到一些全屏网站,看着就很高端大气上档次,想实际操作的话,可以试着使用fullpage.js这个基于jquery的插件,轻量又很方便。

功能:

  1. 支持鼠标滚动
  2. 支持前进后退和键盘控制
  3. 多个回调函数
  4. 支持手机、平板触摸事件
  5. 支持 CSS3 动画
  6. 支持窗口缩放
  7. 窗口缩放时自动调整
  8. 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

兼容性:jquery支持jquery 1.7+,浏览器支持IE8+,Chrome,Firefox,Opera,Safari。

准备工作:

1、引入文件:

<link rel="stylesheet" href="http://www.mamicode.com/css/jquery.fullPage.css">

<script src="http://www.mamicode.com/js/jquery.min.js"></script> <!--基于jquery-->

<!-- jquery.easings.min.js  可以支持更多动画过渡的效果,用于 easing 参数,也可以用jQuery UI 代替,如果不需要,可去不要文件 -->

<script src="http://www.mamicode.com/js/jquery.easings.min.js"></script>

<script src="http://www.mamicode.com/js/jquery.fullPage.js"></script>

检查引入成功,就可以使用了fullpage.js这个插件了!

2、建立一个基本的页面结构:

<div id="gufeibai">

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

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

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

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

  <div class="section">第五屏</div>

</div>

每一个section都是一个页面,包裹住所有的页面的容器不能是body,可以任意命名一个id包裹住所有的section。

3、实现全屏滚动

<script>

  $(function(){

    $(‘#gufeibai‘).fullpage();   //激活fullpage的效果,可以检查页面看效果了

  });  

</script>

这个方法还可以有很多配置项,比如给多个页面填充不同的背景颜色:$(‘#gufeibai‘).fullpage({ sectionsColor : [‘pink‘, ‘red‘, ‘green‘, ‘yellow‘, ‘write‘] }); 

试着看看效果吧,更多配置项看教程二~

 

 

fullpage.js简单教程(一)