fullpage.js jq全屏滚动插件
2015-09-11 09:40
706 查看
fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用。
(代码演示效果并且可以下载查看http://www.dowebok.com/77.html)
1.2 css:引入的css并不是给元素设置样式的,元素的样式需要自己写
1.3 html:每一个section代码一屏,默认从第一屏显示,若需要自定义从某屏开始显示,为section添加active类。示例默认从第三屏显示
1.4 js:
效果:http://denon-7c931.coding.io/fullpagejs.html
1.5 可以在某屏中再添加子滚动屏,借助slide类。修改上述第二个section如下:
1.6 添加背景屏,在html添加两个section
添加css
1.7 循环演示:continuousVertical设置为true
效果:http://denon-7c931.coding.io/xhfull.html (滚动到第6屏,再向下滚动时自动回到第一屏)
1.8 绑定菜单:添加菜单项
添加css
修改js
效果:http://denon-7c931.coding.io/memufull.html
1.9 导航演示:设置’navigation': true,
效果:http://denon-7c931.coding.io/navfull.html (导航在右侧)
1.1 垂直滚动
css
html
js
效果:http://denon-7c931.coding.io/fullpage.html
1.2 css3动画:修改js就行
效果:http://denon-7c931.coding.io/fulldh.html
1.3 自动滚动,js修改如下
效果:http://denon-7c931.coding.io/fullauto.html
(代码演示效果并且可以下载查看http://www.dowebok.com/77.html)
一、fullPage.js实现全屏
fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js1、基本演示
1.1 引入文件<!-- 引入css --> <link rel="stylesheet" type="text/css" href="./fullPage.js-master/jquery.fullPage.css" /> <!-- fullpage.js依赖于jquery库 --> <script type="text/javascript" src="./jquery.js"></script> <script type="text/javascript" src="./fullPage.js-master/jquery.fullPage.min.js"></script>
1.2 css:引入的css并不是给元素设置样式的,元素的样式需要自己写
<style type="text/css"> body { color: #FFFFFF; } .section1 { background-color: #BFDA00; } .section2 { background-color: #2EBE21; } .section3 { background-color: #2C3E50; } .section4 { background-color: #FF9900; } </style>
1.3 html:每一个section代码一屏,默认从第一屏显示,若需要自定义从某屏开始显示,为section添加active类。示例默认从第三屏显示
<div id="ido"> <div class="section section1"> <h1>每一个section是一屏,这是第一屏</h3> </div> <div class="section section2"> <h1>每一个section是一屏,这是第二屏</h3> </div> <div class="section section3 active"> <h1>每一个section是一屏,这是第三屏</h3> </div> <div class="section section4"> <h1>每一个section是一屏,这是第四屏</h3> </div> </div>
1.4 js:
<script type="text/javascript"> $(function() { $("#ido").fullpage(); }); </script>
效果:http://denon-7c931.coding.io/fullpagejs.html
1.5 可以在某屏中再添加子滚动屏,借助slide类。修改上述第二个section如下:
<div class="section section2" style="text-align:center"> <h1 class="slide">第二屏的第一屏</h1> <h1 class="slide">第二屏的第二屏</h1> <h1 class="slide">第二屏的第三屏</h1> <h1 class="slide">第二屏的第四屏</h1> </div>
1.6 添加背景屏,在html添加两个section
<div class="section section5"> <h1>每一个section是一屏,这是第5屏--图片背景</h3> </div> <div class="section section6"> <h1>每一个section是一屏,这是第6屏--图片背景</h3> </div>
添加css
.section5 { background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;} .section6 { background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;} 效果:http://denon-7c931.coding.io/bjfull.html (滚动到5和6屏)
1.7 循环演示:continuousVertical设置为true
$(function() { $("#ido").fullpage( { continuousVertical: true }); });
效果:http://denon-7c931.coding.io/xhfull.html (滚动到第6屏,再向下滚动时自动回到第一屏)
1.8 绑定菜单:添加菜单项
<ul id="menu"> <li data-menuanchor="page1" class="active"><a href="#page1">第一屏</a></li> <li data-menuanchor="page2"><a href="#page2">第二屏</a></li> <li data-menuanchor="page3"><a href="#page3">第三屏</a></li> <li data-menuanchor="page4"><a href="#page4">第四屏</a></li> <li data-menuanchor="page5"><a href="#page5">第5屏</a></li> <li data-menuanchor="page6"><a href="#page6">第6屏</a></li> </ul>
添加css
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;} #menu li { float: left; margin: 0 10px 0 0; font-size: 14px;} #menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;} #menu .active a { color: #fff; background-color: #333;}
修改js
$(function() { $("#ido").fullpage( { continuousVertical: true, //循环演示 //绑定菜单 anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'], menu: '#menu', }); });
效果:http://denon-7c931.coding.io/memufull.html
1.9 导航演示:设置’navigation': true,
$(function() { $("#ido").fullpage( { continuousVertical: true, //循环演示 //绑定菜单 anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'], menu: '#menu', // 导航 'navigation': true, }); });
效果:http://denon-7c931.coding.io/navfull.html (导航在右侧)
2、配置如图
如果需要配置easing和scrollOverflow,则需要引入额外的js(在vendors目录下)<!-- jquery.easings.min.js 用于 easing 参数,也可以使用完整的 jQuery UI 代替,如果不需要设置 easing 参数,可去掉改文件 --> <script type="text/javascript" src="./fullPage.js-master/vendors/jquery.easings.min.js"></script> <!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 --> <script type="text/javascript" src="./fullPage.js-master/vendors/jquery.slimscroll.min.js"></script>
二、fullPage实现全屏
fullPage 是一款不依赖任何 js 库的全屏滚动组件,支持垂直/水平滚动、CSS3 旋转/缩放动画,支持 IE5.5+,支持移动设备。其Github地址:https://github.com/powy1993/fullpage
1、基本演示
<script type="text/javascript" src="./fullpage-master/js/fullPage.min.js"></script>1.1 垂直滚动
css
body { width: 100%; *cursor: default; overflow: hidden; font: 16px/1.5 "Microsoft YaHei"; } div,p { margin: 0; padding: 0; } ul { list-style: none; } #pageContain { overflow: hidden; } .page { display: none; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } .contain { width: 100%; height: 100%; display: none; position: relative; z-index: 0; } .current .contain,.slide .contain { display: block; } .current { display: block; z-index: 1; } .slide { display: block; z-index: 2; } .page1 { background: #37c1e3; } .page2 { background: #009922; } .page3 { background: #992211; } .page4 { background: #ff00ff; } .page5 { background: #00ff00; } .page6 { background: #22ffff; } #navBar { z-index: 3; position: absolute; top: 10%; right: 3%; } #navBar .active { background: #ccc; } #navBar li { cursor: pointer; margin-bottom: 10px; transition: all .7s ease; border-radius: 50%; line-height: 40px; text-align: center; width: 40px; height: 40px; } h1 { text-align: center; margin-top: 20%; }
html
<div id="pageContain"> <div class="page page1 current"> <div class="contain"> <h1 class="txt">第一屏</h1> </div> </div> <div class="page page2"> <div class="contain"> <h1 class="txt">第二屏</h1> </div> </div> <div class="page page3"> <div class="contain"> <h1 class="txt">第三屏</h1> </div> </div> <div class="page page4"> <div class="contain"> <h1 class="txt">第四屏</h1> </div> </div> <div class="page page5"> <div class="contain"> <h1 class="txt">第五屏</h1> </div> </div> </div> <ul id="navBar"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
js
var runPage; runPage = new FullPage({ id: 'pageContain', slideTime: 800, effect: { transform: { translate: 'Y' //垂直滚动,改为X则是水平滚动 }, opacity: [0, 1] }, mode: 'wheel, touch, nav:navBar', easing: 'ease' });
效果:http://denon-7c931.coding.io/fullpage.html
1.2 css3动画:修改js就行
var runPage; runPage = new FullPage({ id: 'pageContain', slideTime: 800, effect: { transform: { translate: 'X', scale: [0, 1], rotate: [270, 0] }, opacity: [0, 1] }, mode: 'wheel, touch, nav:navBar', easing: 'ease' });
效果:http://denon-7c931.coding.io/fulldh.html
1.3 自动滚动,js修改如下
var runPage, interval, autoPlay; autoPlay = function(to) { clearTimeout(interval); interval = setTimeout(function() { runPage.go(to); }, 1000); } runPage = new FullPage({ id: 'pageContain', slideTime: 800, effect: { transform: { translate: 'X', scale: [0, 1], rotate: [270, 0] }, opacity: [0, 1] }, mode: 'wheel, touch, nav:navBar', easing: 'ease', callback: function(index, thisPage){ index = index + 1 > 3 ? 0 : index + 1; autoPlay(index); } }); interval = setTimeout(function() { runPage.go(runPage.thisPage() + 1); }, 1000);
效果:http://denon-7c931.coding.io/fullauto.html
2、配置如图
1、选项
选项 | 类型 | 默认值 | 说明 |
---|---|---|---|
verticalCentered | 字符串 | true | 内容是否垂直居中 |
resize | 布尔值 | false | 字体是否随着窗口缩放而缩放 |
slidesColor | 函数 | 无 | 设置背景颜色 |
anchors | 数组 | 无 | 定义锚链接 |
scrollingSpeed | 整数 | 700 | 滚动速度,单位为毫秒 |
easing | 字符串 | easeInQuart | 滚动动画方式 |
menu | 布尔值 | false | 绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动 |
navigation | 布尔值 | false | 是否显示项目导航 |
navigationPosition | 字符串 | right | 项目导航的位置,可选 left 或 right |
navigationColor | 字符串 | #000 | 项目导航的颜色 |
navigationTooltips | 数组 | 空 | 项目导航的 tip |
slidesNavigation | 布尔值 | false | 是否显示左右滑块的项目导航 |
slidesNavPosition | 字符串 | bottom | 左右滑块的项目导航的位置,可选 top 或 bottom |
controlArrowColor | 字符串 | #fff | 左右滑块的箭头的背景颜色 |
loopBottom | 布尔值 | false | 滚动到最底部后是否滚回顶部 |
loopTop | 布尔值 | false | 滚动到最顶部后是否滚底部 |
loopHorizontal | 布尔值 | true | 左右滑块是否循环滑动 |
autoScrolling | 布尔值 | true | 是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条 |
scrollOverflow | 布尔值 | false | 内容超过满屏后是否显示滚动条 |
css3 | 布尔值 | false | 是否使用 CSS3 transforms 滚动 |
paddingTop | 字符串 | 0 | 与顶部的距离 |
paddingBottom | 字符串 | 0 | 与底部距离 |
fixedElements | 字符串 | 无 | |
normalScrollElements | 无 | ||
keyboardScrolling | 布尔值 | true | 是否使用键盘方向键导航 |
touchSensitivity | 整数 | 5 | |
continuousVertical | 布尔值 | false | 是否循环滚动,与 loopTop 及 loopBottom 不兼容 |
animateAnchor | 布尔值 | true | |
normalScrollElementTouchThreshold | 整数 | 5 |
2、方法
名称 | 说明 |
---|---|
moveSectionUp() | 向上滚动 |
moveSectionDown() | 向下滚动 |
moveTo(section, slide) | 滚动到 |
moveSlideRight() | slide 向右滚动 |
moveSlideLeft() | slide 向左滚动 |
setAutoScrolling() | 设置页面滚动方式,设置为 true 时自动滚动 |
setAllowScrolling() | 添加或删除鼠标滚轮/触控板控制 |
setKeyboardScrolling() | 添加或删除键盘方向键控制 |
setScrollingSpeed() | 定义以毫秒为单位的滚动速度 |
3、回调函数
名称 | 说明 |
---|---|
afterLoad | 滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 是序号,从1开始计算 |
onLeave | 滚动前的回调函数,接收 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个参数 |
相关文章推荐
- 让你的IIS服务器支持JSP
- JavaScript刷票
- 让你的IIS服务器支持JSP
- 用javascript实现java中的集合list(后续不断完善优化)
- 用javascript实现java中的集合list(后续不断完善优化)
- 【log4js】
- JS中正负数的千位分隔符方法,利用正则表达式
- 常用js代码
- 总结一下最近用到的技术(2)--JsonSchema和JsonSchemaValidator
- js基本概念注意点—操作符
- 原生js瀑布流效果
- VS C# .NET WebBrowser控件 利用插入JS代码,实现控制弹出IE窗口
- Javascript函数声明与递归调用
- JSP JSTL EL标签使用
- jsp中获得路径的两个方法和获得url路径的方法
- JSP基础
- JS常用正则表达式
- ANGULAR JS PROMISE使用
- 京东众筹双色球中奖号计算方法
- ArcGIS for Javascript API 3.14本地部署