Fullpage入门指南

简介:fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便、很轻松的制作出全屏网站

主要功能:

支持鼠标滚动

支持前进后退和键盘控制

多个回调函数

支持手机、平板触摸事件

支持 CSS3 动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

那么来简单实现一下单屏滚动效果吧~

欢迎学习交流--梦幻雪冰

首先引入文件:reset.css

                      jquery.fullPage.css

                      jquery.fullPage.min.js

                      jquery-1.8.3.min.js

                      jquery-ui-1.10.3.min.js

文件下载地址: 访问密码 73a1   欢迎学习交流--梦幻雪冰

单屏滚动效果如下

 
   

梦幻雪冰

第一屏

fullPage.js — 【梦幻雪冰】基本演示

第二屏的第一屏

第二屏的第二屏

第二屏的第三屏

第三屏

第四屏

第五屏

第六屏

第七屏

第八屏

这是最后一屏:【梦幻雪冰】

注意几点:

【1】结构中的div的类名为“section”,因为 jquery.fullPage.css样式已经为大家写好了

【2】JavaScript代码要写在head里面,不然会出现文本内容不能居中和滚动效果出现问题

【3】为了实现字体随着窗口缩放而缩放,字体大小中属性值的单位不要用px而是用em

【4】设置导航栏,要定义导航栏的id或者是类名,绑定到menu属性里面(#menu或者.menu),用data-menuanchor设置选中要跳转的栏目或者用 data-index(设置active类名)
【5】为了防止 在滚动栏目底部显示下一个栏目的问题,可以在.section类选择器里面添加一句overflow:hidden;就可以解决该问题了。

文档:
 
 
特此声明:图片来源于问说网

你可能感兴趣的:(Fullpage入门指南)