数据载入中，请稍后......
懒人码库客户端
欢迎来到懒人码库！懒人码库QQ群：
当前位置： >
jQuery ui页面全屏滚动fullPage.js插件页面滚动时图文动画演示
09:57　来源： / 作者：懒人
已被阅读：次　分类：　上一篇： 下一篇：
如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面（查看），QQ浏览器的官网站（查看）。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。 fullPage.js 是一个基于
的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有： &支持鼠标滚动 &支持前进后退和键盘控制 &多个回调函数 &支持手机、平板触摸事件
jQuery制作UI界面全屏滚动展示插件fullPage.js。附件包含8种样式。
用法介绍：
滑动鼠标滚轮便可切换UI界面效果。
jquery代码引用：
&script&src=&js/jquery-1.8.3.min.js&&&/script&
&script&src=&js/jquery-ui-1.10.3.min.js&&&/script&
&script&src=&js/jquery.fullPage.min.js&&&/script&
$(document).ready(function()&{
$.fn.fullpage({
slidesColor:&['#1bbc9b',&'#4BBFC3',&'#7BAABE',&'#f90'],
anchors:&['page1',&'page2',&'page3',&'page4']
html页面布局代码：
&div&class=&section&&
&h3&第一屏&/h3&
&p&fullPage.js&&&基本演示&/p&
&div&class=&section&&
&div&class=&slide&&&h3&第二屏的第一屏&/h3&&/div&
&div&class=&slide&&&h3&第二屏的第二屏&/h3&&/div&
&div&class=&slide&&&h3&第二屏的第三屏&/h3&&/div&
&div&class=&section&&
&h3&第三屏&/h3&
&div&class=&section&&
&h3&第四屏&/h3&
&p&这是最后一屏&/p&
(搜索小技巧,留空显示所有)小贴士：懒人码库
为网页前端人员提供建站常用的广告代码和网页特效，内容涵盖焦点图，导航菜单，jQuery代码，图片特效，对联广告，日历控件，在线客服等。
我们一直在进步还没有任何记录...
jquery.fullPage.js全屏滚动插件教程演示
来源：jquery特效
作者： 懒人建站
jquery.fullPage.js是一个全屏滚动插件，本文提供jquery.fullPage实例教程演示和fullPage.js中文api参数说明，看啥都不如看演示来的直观，走起！
jquery.fullPage.js是一个全屏滚动插件，本文提供jquery.fullPage实例教程演示
看啥都不如看演示来的直观，走起！
/js/jquery/jquery.fullPage/index2.html
/js/jquery/jquery.fullPage/index3.html
/js/jquery/jquery.fullPage/index4.html
/js/jquery/jquery.fullPage/index5.html
/js/jquery/jquery.fullPage/index6.html
/js/jquery/jquery.fullPage/index7.html
/js/jquery/jquery.fullPage/index11.html
&/js/jquery/jquery.fullPage/index12.html
jquery.fullPage.js全屏滚动插件github地址：/alvarotrigo/fullPage.js
fullPage.js中文api 配置参数
verticalCentered
字体是否随着窗口缩放而缩放
slidesColor
设置背景颜色
定义锚链接
scrollingSpeed
滚动速度，单位为毫秒
easeInQuart
滚动动画方式
绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
navigation
是否显示项目
navigationPosition
项目导航的位置，可选 left 或 right
navigationColor
项目导航的颜色
navigationTooltips
项目导航的 tip
slidesNavigation
是否显示左右滑块的项目导航
slidesNavPosition
左右滑块的项目导航的位置，可选 top 或 bottom
controlArrowColor
左右滑块的箭头的背景颜色
loopBottom
滚动到最底部后是否滚回顶部
滚动到最顶部后是否滚底部
loopHorizontal
左右滑块是否循环滑动
autoScrolling
是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条
scrollOverflow
内容超过满屏后是否显示滚动条
是否使用 CSS3 transforms 滚动
paddingTop
与顶部的距离
paddingBottom
与底部距离
fixedElements
normalScrollElements
keyboardScrolling
是否使用键盘方向键导航
touchSensitivity
continuousVertical
是否循环滚动，与 loopTop 及 loopBottom 不兼容
animateAnchor
normalScrollElementTouchThreshold
fullPage.js中文api 方法
moveSectionUp()
moveSectionDown()
moveTo(section, slide)
moveSlideRight()
slide 向右滚动
moveSlideLeft()
setAutoScrolling()
设置页面滚动方式，设置为 true 时
setAllowScrolling()
添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling()
添加或删除键盘方向键控制
setScrollingSpeed()
定义以毫秒为单位的滚动速度
fullPage.js中文api 回调函数
滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：
index 是离开的&页面&的序号，从1开始计算；
nextIndex 是滚动到的&页面&的序号，从1开始计算；
direction 判断往上滚动还是往下滚动，值是 up 或 down。
afterRender
页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
afterSlideLoad
滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave
某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数
本文链接：/js/jquery/jquery.fullPage.html
(责任编辑：懒人建站)
jquery.fullPage.js全屏滚动插件教程演示由懒人建站收集整理，您可以自由传播，请主动带上本文链接
就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
jquery.fullPage.js全屏滚动插件教程演示-相关文章
来自百度的搜索推荐
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
这个更刺ｃ激，准备好手纸哦 A 片。。 ２８８ｄ．ｐｗ
是男L人L就L上的L网C战，A 片：htTP://uVU.Cc/ijW6
loopHorizontal:true,这个参数是控制水平方向循环滚动，到最后一张时，直接拉到第一张，请问怎么实现不间断动，访客感觉不到拉的那下呢？谢谢
这个更刺j激，准备好手纸哦 A 片。。 hTTp://T.CN/RtdWjkj
很详细顶起来
jQuery需求问题
你好，ajax请求从后台查询出来数据，有几条数据就显示几个屏幕，这个需求怎么实现？
jQuery需求问题
你好，ajax请求从后台查询出来数据，有几条数据就显示几个屏幕，这个需求怎么实现？
小牛 我也遇到这个问题了 不知道你有没有解决的方法了现在~
最后一个section的内容超过一屏 每次滚到最后 它都会自动滚回section顶部 请问这该如何处理？？
请问下 设置scrolloverflow：true后，出现滚动条，那如果我想要隐藏滚动条该怎么实现呢？
[微博蛋糕] 顶。。一定得顶。。。。
桃子-和小v
我想控制每一个滚动屏幕的高度，该修改哪里呢？？
横向滚动怎么破
不错不错，来看看。。
爱奇趣分享网
很久没有过来了，今天过来看一看！
歪妖内涵网
不错的站点,以后一定常来。
我只想让其中一个section出现滚动条该怎么设置呢？现有的参数只能让这个网页滚动（section1滚到section2滚到section3），我只是想section3搭载了下拉加载插件后
Jquery特效
所谓回调就是传个函数进去 $(#dowebok).fullpage({ sectionsColor: [#1bbc9b, #4BBFC3, #7BAABE, #f90], //下面这货就是传入的回调函数 afterLoad: function(anchorLink, index){
Jquery特效
我觉得 你这个需求 可以使用 afterLoad 这个回调，在文中“fullPage.js中文api 回调函数”里面有说明，回调使用方法可参考 回调函数演示 http://www.51xuediannao.
我想当项目导航在该页的时候tip显示怎么设置呢，现在的效果是鼠标以上才显示文字jQuery全屏滚动插件fullPage.js
如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面（），QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。
fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
jQuery 兼容
兼容 jQuery 1.7+。
浏览器兼容
1、引入文件
&link rel="stylesheet" href="css/jquery.fullPage.css"&
&script src="js/jquery.min.js"&&/script&
&!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 --&
&script src="js/jquery.easings.min.js"&&/script&
&!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 --&
&script src="js/jquery.slimscroll.min.js"&&/script&
&script src="js/jquery.fullPage.js"&&/script&
&div id="dowebok"&
&div class="section"&
&h3&第一屏&/h3&
&div class="section"&
&h3&第二屏&/h3&
&div class="section"&
&h3&第三屏&/h3&
&div class="section"&
&h3&第四屏&/h3&
每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，如：
&div class="section active"&第三屏&/div&
同时，可以在 section 内加入 slide，如：
&div id="dowebok"&
&div class="section"&第一屏&/div&
&div class="section"&第二屏&/div&
&div class="section"&
&div class="slide"&第三屏的第一屏&/div&
&div class="slide"&第三屏的第二屏&/div&
&div class="slide"&第三屏的第三屏&/div&
&div class="slide"&第三屏的第四屏&/div&
&div class="section"&第四屏&/div&
3、JavaScript
$(function(){
$('#dowebok').fullpage();
verticalCentered
内容是否垂直居中
字体是否随着窗口缩放而缩放
slidesColor
设置背景颜色
定义锚链接
scrollingSpeed
滚动速度，单位为毫秒
easeInQuart
滚动动画方式
绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
navigation
是否显示项目导航
navigationPosition
项目导航的位置，可选 left 或 right
navigationColor
项目导航的颜色
navigationTooltips
项目导航的 tip
slidesNavigation
是否显示左右滑块的项目导航
slidesNavPosition
左右滑块的项目导航的位置，可选 top 或 bottom
controlArrowColor
左右滑块的箭头的背景颜色
loopBottom
滚动到最底部后是否滚回顶部
滚动到最顶部后是否滚底部
loopHorizontal
左右滑块是否循环滑动
autoScrolling
是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条
scrollOverflow
内容超过满屏后是否显示滚动条
是否使用 CSS3 transforms 滚动
paddingTop
与顶部的距离
paddingBottom
与底部距离
fixedElements
normalScrollElements
keyboardScrolling
是否使用键盘方向键导航
touchSensitivity
continuousVertical
是否循环滚动，与 loopTop 及 loopBottom 不兼容
animateAnchor
normalScrollElementTouchThreshold
moveSectionUp()
moveSectionDown()
moveTo(section, slide)
moveSlideRight()
slide 向右滚动
moveSlideLeft()
slide 向左滚动
setAutoScrolling()
设置页面滚动方式，设置为 true 时自动滚动
setAllowScrolling()
添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling()
添加或删除键盘方向键控制
setScrollingSpeed()
定义以毫秒为单位的滚动速度
3、回调函数
滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；
nextIndex 是滚动到的“页面”的序号，从1开始计算；
direction 判断往上滚动还是往下滚动，值是 up 或 down。
afterRender
页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
afterSlideLoad
滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave
某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数
fullPage.js GitHub 地址：
& CopyRightjQuery制作UI界面全屏滚动展示插件fullPage.js
下载资源()次
阅读次数()次
发布时间：
用法简介：
jQuery制作UI界面全屏滚动展示插件fullPage.js。附件包含8种样式。用法介绍：滑动鼠标滚轮便可切换UI界面效果。jquery代码引用：&script&src=&js/jquery-1.8.3.min.js&&&/script&
&script&src=&js/jquery-ui-1.10.3.min.js&&&/script&
&script&src=&js/jquery.fullPage.min.js&&&/script&
$(document).ready(function()&{
$.fn.fullpage({
slidesColor:&['#1bbc9b',&'#4BBFC3',&'#7BAABE',&'#f90'],
anchors:&['page1',&'page2',&'page3',&'page4']
&/script&html页面布局代码：&div&class=&section&&
&h3&第一屏&/h3&
&p&fullPage.js&—&基本演示&/p&
&div&class=&section&&
&div&class=&slide&&&h3&第二屏的第一屏&/h3&&/div&
&div&class=&slide&&&h3&第二屏的第二屏&/h3&&/div&
&div&class=&slide&&&h3&第二屏的第三屏&/h3&&/div&
&div&class=&section&&
&h3&第三屏&/h3&
&div&class=&section&&
&h3&第四屏&/h3&
&p&这是最后一屏&/p&
相关标签：
网友评论：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
什么是邮箱订阅？
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式，用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮，当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。相信喜欢前端的朋友经常会在网页上浏览到一些全屏网站，这些网站一般采用几幅超大背景或单色做背景，再添加一些内容，显得整个页面各位的高端大气。比如iPhone 5c的介绍页面，QQ浏览器的官网等，如果你也想拥有这样的技术，那就一起来学习fullPage吧。想了解更多内容，请扫一扫二维码添加微信公众号，一起探讨学习！！上游创意(shang-yo)　
　文章为作者独立观点，不代表大不六文章网立场
shang-yoweb前端技术分享与UI设计思想分享热门文章最新文章shang-yoweb前端技术分享与UI设计思想分享&&&&违法和不良信息举报电话：183-
举报邮箱：
Copyright(C)2016 大不六文章网
京公网安备78