这个jQuery插件fullpage.js全屏滚动效果

这个例子给大家分享全屏滚动插件fullpage.js具体使用方法供大家参考，以下具体内容

0.01基本演示和js代码的HTML布局

三个文件连接连接
css文件
/ / jQuery 1.8.3版
的 / /整版插件的压缩版

第{文本对齐：中心；50px字体微软雅黑；颜色：# FFF；} / /你可以在文本中设置页面的变化
$（函数（）{（））
$（# dowebok）。Fullpage（{
/ /整版是插件的基本设置后，设置更重要
sectionscolor：{# 1bbc9b '，' # 4bbfc3 '，' # 7baabe '，' # F90}
/ / sectionscolor，当没有背景图片，这是设置背景颜色。否则，它就是空白数组的形式。中间用逗号隔开。不管是十六个还是英文单词，都需要用一个引号来包装。
}）；
}）；

大框绑定滚动框

第一屏
fullpage.js基本示范

第二个/滚动屏幕如果增加div和幻灯片在风格的内部可以增加横向点击。
第二屏的第一屏
第二屏的第二屏
第二屏幕的第三个屏幕
第三屏幕
第四屏幕
这是最后一幕

0.02在背景图片中显示的HTML布局和js代码

需要注意的不是设置在CSS颜色中，而是设置背景图片0。
1 { background: url（图片 / 1。JPG）50%；}
。第二部分{背景：URL（图像 / 2。JPG）50%；}
。第三部分{背景：URL（图像 / 3。JPG）50%；}
。第4 {背景：URL（图像 / 4。JPG）50%；}
$（函数（）{（））
$（# dowebok）。Fullpage（）； / /找到一个大箱子套整版全屏幕滚动
}）；


0.03个循环演示HTML布局和js代码。
$（函数（）{（））
$（# dowebok）。Fullpage（{
sectionscolor：{# 1bbc9b '，' # 4bbfc3 '，' # 7baabe '，' # F90}，并sectionscolor / /如上设置每个屏幕颜色必须用逗号用单引号隔开
continuousvertical：虚假，底层设置 /向下滚动是第一张真正的将执行此操作是不是默认设置假执行不执行不执行是不确定的
}）；
}）；
第一屏
fullpage.js循环演示
第二屏幕
第三屏幕
第四屏幕
这是最后一个屏幕，向下滚动回到第一个屏幕。
0.04回调函数演示

fullpage.js -回调功能演示
第{文本对齐：中心；50px字体微软雅黑；颜色：# FFF；}
。2 P {位置：相对；左：120%；}
。3 P {位置：相对；下：120%；}
。第4 P {显示：无；}
$（函数（）{（））
$（# dowebok）。Fullpage（{
sectionscolor：{# 1bbc9b '，' # 4bbfc3 '，' # 7baabe '，' # F90}，
设置背景色
后负荷：功能（anchorlink，指数）{
滚动到一个回调函数/屏幕，接收anchorlink和指数两个参数，anchorlink是锚链接的名称，指数从1计算序列号
如果（索引= 2）{
$（'。2）。找到（'p'）。Delay（500）。动画（{
/ /找到（'p'）在所有段落的P元素的后代搜索
延迟（500），其中参数是延迟值，其单位为毫秒。
动画（）方法执行CSS属性集的自定义动画。
左：0
}，1500，'easeoutexpo '）； / / jQuery Easing动画效果的延伸
}
如果（索引= 3）{
$（'节'）。找到（'p'）。Delay（500）。动画（{
底部：'0'
}，1500，'easeoutexpo）；
}
如果（索引= 4）{
$（'节'）。找到（'p'）。FadeIn（2000）；
/ /渐明（）方法逐步改变所选元素的不透明度，隐藏可见（变色效应）
}
}，
休假：函数（指数、方向）{
/ /滚动回调函数接收前指数NextIndex，和方向3个参数：指标是离开页面数，从1开始计算；
/ / NextIndex是页面滚动的序号，从1开始的。
向上或向下滚动，以向上或向下的值。
如果（指数= = 2）{
$（'。2）。找到（'p'）。Delay（500）。动画（{
左：120%
}，1500，'easeoutexpo）；
}
如果（指数= = 3）{
$（'节'）。找到（'p'）。Delay（500）。动画（{
底部：120%
}，1500，'easeoutexpo）；
}
如果（指数= =''）{
$（'节'）。找到（'p'）。FadeOut（2000）；
/ /淡出（）方法逐步改变所选元素的不透明度，从可见光（衰落）
}
}，
continuousvertical：假，
无论 / /滚动循环，是不兼容的，loopbottom looptop
}）；
}）；
第一屏
fullpage.js -回调功能演示
第二屏幕
回调函数在滚动到第二屏幕后执行的效果
第三屏幕
回调函数在滚动到第三屏幕后执行的效果
第四屏幕
回调函数在滚动到第四屏幕后执行的效果
0.05绑定菜单方法

fullpage.js结合菜单演示_dowebok
#菜单{ margin: 0；padding: 0；位置：固定；左：10px；顶部：10px；列表样式类型：无；Z指数：70；}
#菜单里{浮动：左；保证金：0 10px 00；字体大小：14px；}
#菜单{浮动：左；填充：10px 20px；背景颜色：# FFF；颜色：# 333；文字装饰：{ }；}
# menu.active一{颜色：# FFF；背景颜色：# 333；}
第{文本对齐：中心；50px字体微软雅黑；颜色：# FFF；}

$（函数（）{（））
$（# dowebok）。Fullpage（{
sectionscolor：{# 1bbc9b '，' # 4bbfc3 '，' # 7baabe '，' # F90}，
设置颜色参数
主持人：{ 'page1 '，'page2 '，'page3 '，'page4}，
锚链接定义
菜单：#菜单
绑定菜单，并设置与菜单对应的锚点属性值，可以控制滚动条。
}）；
}）；
第一屏
第二屏幕
第三屏幕
第四屏幕
第一屏
fullpage.js结合菜单演示
第二屏幕
请检查左上角并点击控制。
第三屏幕
绑定菜单没有默认样式，您需要自己编写。
第四屏幕
这是最后一幕
0.06项目导航演示
$（函数（）{（））
$（# dowebok）。Fullpage（{
sectionscolor：{# 1bbc9b '，' # 4bbfc3 '，' # 7baabe '，' # F90}，
设置颜色属性
导航：真的，
是否显示需要设置默认值的导航项是false。
}）；
}）；
第一屏
fullpage.js项目导航演示
第二屏幕
请检查右边的圆圈。
第三屏幕
圆圈也可以设置位置，颜色，加上提示，点击可以控制。
第四屏幕
这是最后一幕
0.07自动循环轧制
第{文本对齐：中心；50px字体微软雅黑；颜色：# FFF；}
第一屏
第二屏幕
第三屏幕
第四屏幕
$（函数（）{（））
$（# dowebok）。Fullpage（{
sectionscolor：{# 1bbc9b '，' # 4bbfc3 '，' # 7baabe '，' # F90}，
设置颜色属性
continuousvertical：真
/ /设置是否滚动循环，和loopbottom looptop和不兼容的默认是假的
}）；
setInterval（）函数（{ / /三秒计时器执行
（美元。FN。整版。movesectiondown）； / /滚动
}，3000）；
}）；

0.08设置水平屏幕的自动播放
第{文本对齐：中心；50px字体微软雅黑；颜色：# FFF；}
第一屏
请滚动到第二个屏幕看
第二屏的第一屏
第二屏的第二屏
第二屏幕的第三个屏幕
第三屏幕
第四屏幕
$（函数（）{（））
$（# dowebok）。Fullpage（{
sectionscolor：{# 1bbc9b '，' # 4bbfc3 '，' # 7baabe '，' # F90}，
设置颜色属性
loopbottom：真
/ / loopbottom布尔值false滚回底滚回到顶端
}）；
setInterval（）{（）函数（
fn.fullpage.moveslideright（）美元；
/ / moveslideright滑滚到右（）
moveslideleft（幻灯片） /向左滚动
}，3000）；
}）；

0.09当当前浏览器的宽度小于多少时关闭滚动条。

第{文本对齐：中心；30px字体微软雅黑；颜色：# FFF；}
启用/关闭基于可视区域大小的全屏滚动效果
如果可视区域的宽度小于1024，全屏滚动效果是封闭的，和滚动条的使用。
请尝试调整浏览器的大小，看看是否出现滚动条。
第四屏幕
$（函数（）{（））
$（# dowebok）。Fullpage（{
sectionscolor：{# 1bbc9b '，' # 4bbfc3 '，' # 7baabe '，' # F90}
设置颜色属性
}）；
$（窗口）。调整大小（函数（）{）
当大小调整浏览器窗口时，调整大小。调整大小（）方法触发调整大小事件，或指定在大小调整事件发生时运行的函数。
autoscrolling（）；
/ /真实是否使用插件的滚动模式，如果错误的选择，浏览器的滚动条就会出现
}）；
功能自动滚动（）{
var = $（窗口）。Width（）；
如果（$ WW 1024）{
美元fn.fullpage.setautoscrolling（假）；
/ / setautoscrolling（）设置页面滚动模式，设置为true时自动设置为false，非滚动
{人}
fn.fullpage.setautoscrolling（真正的）美元；
}
}
autoscrolling（）；
}）；

fullpage.js是jQuery的插件，主要功能是产生一个全屏网站整版插件兼容性与主流浏览器IE7浏览器兼容不在整版描述插件支持以下操作

1。插件可以用鼠标滑轮滚动。

2。当垂直屏幕用于支持键盘的上下箭头时，水平箭头可用于左右箭头。

三.可以使用多个回调函数来制作动画效果，但需要涉及到jQuery UI插件连接。

4、整版还支持触摸事件如触摸笔记本平板手机

5。可以在属性操作使用CSS3动画但应注意CSS3兼容

6。自适应屏幕的大小

7。当回调函数文本可以在样式中设置时，可以设置页面的滚动宽度和背景颜色是否循环。

我引用了整版文件具体如下所示。所需的链接文件可以被喜欢我的消息，可以下载。
这是一组链接的插件样式。

jQuery / 1.8.3版

UI / / jQuery版本的1.12.1需要设置宽松的参数必须链接或错误

最后是主 / /整版插件
配置

1。选项
2。方法
三.回调函数
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。