建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

fullPage 制作网页全屏滚动的JQuery插件

来源:易助科技网浏览量:29收藏

简介


fullPage.js是一个基于jQuery的插件,他能够很方便、很轻松的制作出全屏网站。


更多单页滚动插件:👉  [ 详情 ]


制作网页全屏滚动的JQuery插件fullPage-示例图


fullPage.js的主要功能有:

1、支持鼠标滚动

2、多个回调函数

3、支持手机、平板触摸事件

4、支持CSS3动画

5、支持窗口缩放

6、窗口缩放时自动调整

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



使用


1.  引入 jquery.js 和 fullPage.js 文件


<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />

<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>


如果你需要自定义页面滚动的效果,你需要引入jquery.easings.min.js文件。


<script src="jquery.easings.min.js"></script>


对于内容比较多的页面,可以设置右侧的滚动条,但是默认情况下无法滚动,你需要jquery.slimscroll.min.js文件来自定义滑条滚动效果。


<script type="text/javascript" src="jquery.slimscroll.min.js"></script>



2.  HTML


<div id="fullpage">
  <div class="section">一些内容</div>
  <div class="section">一些内容</div>
  <div class="section">一些内容</div>
  <div class="section">一些内容</div>
</div>


假如你需要让某一个section作为首页的第一屏展示,你只需要给这个section添加一个active的类,Fullpage会自动优先展示这个屏幕,例如定义下面的代码:


<div class="section active">Some section</div>


Fullpage自带左右滑动的幻灯片,只需要在section中添加DIV元素,并且给DIV元素添加slide类,FUllpage会自动生成幻灯片特效,例如下面的代码:


<div class="section">
  <div class="slide"> 滑块 1 </div>
  <div class="slide"> 滑块 2 </div>
  <div class="slide"> 滑块 3 </div>
  <div class="slide"> 滑块 4 </div>
</div>



3. 调用


$(document).ready(function(){
  $('#fullpage').fullPage();
  //最外层包裹的容器上面调用fullPage()方法,方法里面可以有一些配置项
});



4. 配置


$(document).ready(function() {
	$('#fullpage').fullpage({
		//Navigation
		menu: false,//绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false。
		anchors:['firstPage', 'secondPage'],//anchors定义锚链接,默认为[]
		lockAnchors: false,//是否锁定锚链接,默认为false,设为true后链接地址不会改变
		navigation: false,//是否显示导航,默认为false
		navigationPosition: 'right',//导航小圆点的位置
		navigationTooltips: ['firstSlide', 'secondSlide'],//导航小圆点的提示
		showActiveTooltip: false,//是否显示当前页面的tooltip信息
		slidesNavigation: true,//是否显示横向幻灯片的导航,默认为false
		slidesNavPosition: 'bottom',//横向导航的位置,默认为bottom,可以设置为top或bottom
		 
		//Scrolling
		css3: true,//是否使用CSS3 transforms来实现滚动效果,默认为true
		scrollingSpeed: 700,//设置滚动速度,单位毫秒,默认700
		autoScrolling: true,//是否使用插件的滚动方式,默认为true,若为false则会出现浏览器自带滚动条
		fitToSection: true,//设置是否自适应整个窗口的空间,默认值:true
		scrollBar: false,//是否包含滚动条,默认为false,若为true浏览器自带滚动条出现
		easing: 'easeInOutCubic',//定义页面section滚动的动画方式,若修改此项需引入jquery.easing插件
		easingcss3: 'ease',//定义页面section滚动的过渡效果,若修改此项需引入第三方插件
		loopBottom: false,//滚动到最低部后是否连续滚动到顶部,默认为false
		loopTop: false,//滚动到最顶部后是否连续滚动到底部,默认为false
		loopHorizontal: true,//横向slide幻灯片是否循环滚动,默认为true
		continuousVertical: false,//是否循环滚动,不兼容loopTop和loopBottom选项
		normalScrollElements: '#element1, .element2',//避免自动滚动,滚动时的一些元素,例如百度地图
		scrollOverflow: false,//内容超过满屏后是否显示滚动条,true则显示滚动条,若需滚动查看内容还需要jquery.slimscroll插件的配合
		touchSensitivity: 15,//在移动设备中滑动页面的敏感性,默认为5最高100,越大越难滑动
		normalScrollElementTouchThreshold: 5,
		 
		//Accessibility
		keyboardScrolling: true,//是否可以使用键盘方向键导航,默认为true
		animateAnchor: true,//锚链接是否可以控制滚动动画,默认为true,若为false则锚链接定位失效
		recordHistory: true,//是否记录历史,默认为true,浏览器的前进后退可导航。若autoScrolling:false,那么这个属性将被关闭
		 
		//Design
		controlArrows: true,//定义是否通过箭头来控制slide,默认true
		verticalCentered: true,//定义每一页的内容是否垂直居中,默认true
		resize : false,//字体是否随窗口缩放而缩放,默认false
		sectionsColor : ['#ccc', '#fff'],//为每个section设置background-color属性
		paddingTop: '3em',设置每一个section顶部的padding,默认为0
		paddingBottom: '10px',设置每一个section底部的padding,默认为0
		fixedElements: '#header, .footer',固定元素,默认为null,需要配置一个jquery选择器,在页面滚动时,fixElements设置的元素不滚动
		responsiveWidth: 0,
		responsiveHeight: 0,
		 
		//Custom selectors
		sectionSelector: '.section',//section选择器。默认为.section
		slideSelector: '.slide',//slide选择器,默认为.slide
		 
		//events
		onLeave: function(index, nextIndex, direction){},
		afterLoad: function(anchorLink, index){},
		afterRender: function(){},
		afterResize: function(){},
		afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
		onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
	});
});



5. 方法


$.fn.fullpage.moveSectionUp();//向上滚动一页
$.fn.fullpage.moveSectionDown();//向下滚动一页
$.fn.fullpage.moveTo(section,slide);//从1开始,slide从0开始
$.fn.fullpage.silentMoveTo(section,slide);//和moveTo一样,但是没有滚动效果
$.fn.fullpage.moveSlideRight();//幻灯片向右滚动
$.fn.fullpage.moveSlideLeft();//幻灯片向左滚动
$.fn.fullpage.setAutoScrolling(boolean);//动态设置autoScrolling
$.fn.fullpage.setLockAnchors(boolean);//动态设置lockAnchors
$.fn.fullpage.setRecordHistory(boolean);//动态设置recordHistory
$.fn.fullpage.setScrollingSpeed(milliseconds);//动态设置scrollingSpeed
$.fn.fullpage.destory(type);//销毁fullpage,type可以不写或者使用all
$.fn.fullpage.reBuild();/重新更新页面和尺寸,用于ajax请求改变页面结构后重建效果



相关链接


Github 地址 :https://github.com/alvarotrigo/fullPage.js

中文文档 :http://fullpage.81hu.com/