插件描述:fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。
如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,主要是动画,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面(查看网址 http://www.jq22.com/demo/fullpage-141201214949/index8.html#page2)。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。
主要功能有:
- 支持鼠标滚动
- 支持前进后退和键盘控制
- 多个回调函数
- 支持手机、平板触摸事件
- 支持 CSS3 动画
- 支持窗口缩放
- 窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
我利用fullpage.js模仿百度舆情完成的全屏轮播网站网址https://xuanrandeyimojingjin.github.io/baiduyuqing/,初学时的作品,谨供大家看一下效果,有兴趣的可以自己动手设计自己的全屏网站!
jQuery插件
插件调用
<ul id="lunbo">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<script src="jquery.js"></script>
<script src="jqeury.lunbo.js"></script>
<script>
$('#lunbo').lunbo({
//一些配置项
time:40;
step:function(){}
});
</script>
jQuery插件文件
(function($){
var lunbo = function () {
console.log(1);
}
$.fn.extend({
lunbo:lunbo;
})
})(jQuery)
cdn (content deliver network) 内容分发网络
如果百度使用了某个
cdn中的jquery.js,而且用户打开过百度, 我们自己同样使用了 同一个
cdn中的jquery.js, 用户打开我们的网页时使用浏览器缓存中的jquery.js.
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/index.css">
<script src="https://cdn.boot.com/jquery.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
</body>
</html>
fullpage 插件基本使用
<link rel="stylesheet" href="jquery.fullPage.css" media="screen" title="no title" charset="utf-8">
<script src="jquery.js"></script>
<script src="jquery.fullPage.js"></script>
<script>
$(function(){
$('#fullpage').fullpage({
//这里是配置项
});
})
</script>
<div id="fullpage">
<div class="section" id="section-1">
<div class="slide"> </div>
<div class="slide"> </div>
</div>
<div class="section" id="section-2"></div>
<div class="section" id="section-3"></div>
</div>
每滚动一屏,会给当前section加上 active class
所以我们可以写出类似下面这样的 scss 文件来操控动画
#section1{
h1{
/**/
}
h2{
transition: /**/
}
}
#section1.active{
h1{
animation:/**/
}
h2{
/**/
}
}
插件配置项
- sectionsColor
一个数组 规定了各个section的颜色
- verticalCentered
每一页的内容是否垂直居中,默认值为true
- resize
字体大小是否随窗口缩放而缩放 默认值为false
- scrollingSpeed
滚动速度,默认为700毫秒
- anchors
给每个section定义锚链接
- lockAnchors
是否锁定锚链接
- active class
默认显示哪个section
- easing
定义页面section滚动的动画方式 设置这个值需要引入jquery.easings 插件
- css3
默认为true,使用css3 transform 来实现页面滚动动画
- loopTop
滚动到最顶部后是否连续滚动到底部,默认值为false
- loopBottom
滚动到最底部后是否连续滚动回顶部 默认值为false
- loopHorizontal
横向slide幻灯片是否循环滚动,默认值为true
- autoScrolling
是否使用插件的滚动方式,默认值为true, 如果设置为false,则会出现浏览器自带的滚动条
- scrollBar
是否包含滚动条,默认值为false 如果设置为true,则浏览器自带的滚动条出现 页面滚动时还是页滚动,但是滚动条的默认行为也效果
- paddingTop paddingBottom
设置每一个section顶部和底部的padding,默认值为0 如果我们需要设置一个固定在顶部或者底部的菜单,导航,元素等,可以使用这两个配置项
- fixedElements
普通方式书写的固定定位元素会被插件覆盖 需要我们通过指定这个属性才会生效,参数为一个jquery选择器
- keyboardScrolling
是否可以使用键盘方向键导航,默认值为true
- touchSensitivity
在移动设备中滑动页面的敏感性,默认为5,按百分比衡量,越大则越难滑动
- continuousVertical
是否循环滚动,默认值为false,如果设置为true,则页面会循环滚动, 不像loopTop loopBottom那样出现跳动 这个属性和loopTop loopBottom 不兼容 不要同时设置
- animateAnchor
锚链接是否可以控制滚动动画,默认为true。如果设置为false,则通过锚链接定位到某个页面显示不再有动画
- recordHistory
是否记录历史,默认为true,可以记录页面滚动的地址 通过浏览器前进和后退按钮来导航
- menu
绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认值为 false 可以设置为菜单的jquery选择器
<ul id="fullpageMenu">
<li data-menuanchor="page1"><a href="#page1">1</a</li>
.....
</ul>
- navigation
是否显示导航,默认false 如果设置为true 会显示小圆点,作为导航
- navigationPosition
导航小圆点位置,可以设置为left或者right
- navigationTooltips
导航小圆点的tooltips设置,默认为[],按照顺序放置
- showActiveTooltip
是否显示当前页面的导航的tooltip信息,默认为false
- slidesNavigation
是否显示横向幻灯片的导航,默认值为false
- slidesNavPosition
横向幻灯片导航的位置,默认为bottom 可以设置为top
- controlArrows
定义是否通过箭头来控制slide幻灯片,默认值为true 在移动设备上可以通过滑动来操作幻灯片
- scrollOverflow
内容超过满屏后是否显示滚动条,默认为false. 如果设置为true,则会显示滚动条 如果要滚动查看内容,还需要jquery.slimscroll插件,该插件主要用于模拟传统的浏览器滚动条
- sectionSelector
section的选择器,默认为.section
- slideSelector
slide的选择器 默认为.slide.
配置项中的回调函数
- afterLoad(anchorLink,index)
滚动到某一section,且滚动结束后,会触发一次此回调函数,函数接收 anchorLink 和index 两个参数, anchorLink 是锚链接的名称 index 是序号 从1开始计算 可以根据 anchorLink 和 index的参数值判断触发相应的事件
- onLeave(index,nextIndex,direction)
离开一个section时触发,通过return false可以取消滚动 离开的序号 到达的序号 滚动的方向
- afterRender()
页面结构生成之后的回调函数
- afterResize()
浏览器窗口尺寸改变之后的回调函数
- afterSlideLoad()
滚动到某一个幻灯片后的回调函数
- onSlideLeave
离开一个slide之后的回调函数
$.fn.fullpage 对象中的方法介绍
moveSectionUp()
moveSectionDown()
$('#movedown').on('click',function(){
$.fn.fullpage.moveSectionDown();
})
- moveTo(section,slide)
滚动到第几页,第几个幻灯片,注意,页面从1开始,而幻灯片从0开始
- silentMoveTo(section,slide)
滚动到第几页,和moveTo一样,但是没有动画效果
- moveSlideRight()
幻灯片向右滚动
- moveSlideLeft()
幻灯片向左滚动
setAutoScrolling()
setLockAnchors()
setRecordHistory()
setScrollingSpeed()
setAllowScrolling(boolean,[directions])
添加或删除鼠标滚轮/滑动控制,第一个参数true为启用,false 为禁用 后面的参数为方向,取值包含 all,up,down,left,right,可以使用多个,逗号隔开
- destory(type)
销毁fullpage特效,type可以不写,或者使用all,不写type,fullpage给页面添加的样式和html元素还在 如果使用all,则样式 html等全部销毁
- reBuild()
重新更新页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果
~END~
我是渲染的一抹寂静
追求自由 独立 简单 努力做一个热爱生活 珍惜生命的人
白天是个哼次哼次敲代码的程序猿,晚上是读书,健身,享受生活的自由者。
如果你喜欢我的文字和内容,关注我,一起加油 一起进步 不定期更文,我等你来哦!