JQ滚屏插件--fullPage.js
来源:互联网 发布:php 上传进度 编辑:程序博客网 时间:2024/05/01 03:57
fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便、很轻松的制作出全屏网站。
主要功能
- 支持鼠标滚动
- 支持前进后退和键盘控制
- 多个回调函数
- 支持手机、平板触摸事件
- 支持 CSS3 动画
- 支持窗口缩放
- 窗口缩放时自动调整
- 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
兼容性
fullPage.js 支持 IE8+ 及其他现代浏览器。
使用方法
1、引入文件
<link rel="stylesheet" href="css/jquery.fullPage.css"><script src="js/jquery.min.js"></script><script src="js/jquery-ui.min.js"></script><script src="js/jquery.fullPage.js"></script>
2、HTML
<div id="fullpage"> <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> <div class="section">第四屏</div></div>
3、JavaScript
$(function(){ $('#fullpage').fullpage({ 'verticalCentered': false, 'css3': true, 'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'], anchors: ['page1', 'page2', 'page3', 'page4'], 'navigation': true, 'navigationPosition': 'right', 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'] })})整个的实例:
<!doctype html><html><head><meta charset="utf-8"><title>fullpage实例页面 - 问说</title><link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /><style>#fullpage div{ color:#FFF; text-align:center;}</style></head><body><div id="fullpage"> <div class="section">第一屏</div> <div class="section">第二屏<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <div class="section"> <div class="slide">第三屏的第一屏</div> <div class="slide">第三屏的第二屏</div> <div class="slide">第三屏的第三屏</div> <div class="slide">第三屏的第四屏</div> </div> <div class="section">第四屏</div></div><script src="jquery.js"></script><script src="jquery-ui.min.js"></script><script type="text/javascript" src="jquery.fullPage.js"></script><script>$(function(){$('#fullpage').fullpage({'verticalCentered': false,'css3': true,'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],anchors: ['1', '2', '3', '4'],'navigation': true,'navigationPosition': 'right','navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],'scrollOverflow': true,})})</script></body></html>
配置
1、选项
2、方法
3、回调函数
index 是离开的“页面”的序号,从1开始计算;
nextIndex 是滚动到的“页面”的序号,从1开始计算;
direction 判断往上滚动还是往下滚动,值是 up 或 down。afterRender页面结构生成后的回调函数,或者说页面初始化完成后的回调函数afterSlideLoad滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数onSlideLeave某一水平滑块滚动前的回调函数,与 onLeave 类似,接收 anchorLink、index、slideIndex、direction 4个参数
0 0
- JQ滚屏插件--fullPage.js
- 学习fullpage.js插件实现滚屏心得
- jq.fullpage插件
- FullPage.js全屏滚动插件
- fullpage.js---全屏滚动插件
- fullPage.js全屏滚动插件
- 全屏滚动插件fullPage.js
- fullpage.js 插件的使用
- fullPage.js插件的应用
- 全屏滚动插件fullPage.js
- 前端之js插件-fullPage
- 浅谈jQuery.fullpage.js 插件遇到的白屏问题
- 手机整屏滑动插件-----fullPage.js------使用
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage.js
- jQuery全屏滚动插件fullPage.js
- jquery插件fullPage.js完成全屏效果
- jQuery全屏滚动插件fullPage.js演示
- mybatis的xml映射文件**
- git 日常使用笔记
- nginx基本配置与参数
- 数据库操作(增删改查)
- Java Web学习(21):Cookie机制状态管理
- JQ滚屏插件--fullPage.js
- 九、NOSQL与缓存系统-Memcached
- Android_NewBird之Asynctask的基本使用(2)
- River Hopscotch(sort+二分法)
- JSTL标签c:if和c:chose--个人笔记
- Eclipse下使用Android Design Support Library中的控件
- poj 3304 Segments(贪心+直线是否与线段相交!)
- C语言读取数组长度
- 剑指offer 面试题23 从上往下打印二叉树 Java实现