全屏滚动-fullPage

全屏网站看起来很爽的样子
先看iPhone的网站体验一哈,高端大气上档次
今天使用jQuery插件fullPage.js来实现全屏滚动的效果

主要功能
  • 支持鼠标滚动
  • 支持前后进退和键盘控制
  • 多个回调函数
  • 支持手机,平板触摸事件
  • 支持CSS3动画
  • 支持窗口缩放
  • 窗口缩放时自动调整
  • 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
使用方法

1.引入文件

  • 方式一
    1.通过Bower下载:
    bower install fullpage --save
    2.引入












  • 方式二
    通过CDN引入fullPage.js











2.html文件结构

第一屏

第二屏

第三屏

第四屏

在每一屏中还可以包含可以在水平方向上滚动切换的slide。

第一屏
第二屏
第三屏的第一屏
第三屏的第二屏
第三屏的第三屏
第三屏的第四屏
第四屏

3.js文件内容

     

这样子就可以实现啦。
实现文件地址

你可能感兴趣的:(全屏滚动-fullPage)