fullPagejs插件
来源:互联网 发布:p2p 网络摄像机 编辑:程序博客网 时间:2024/06/10 22:52
如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。
主要功能有:
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
使用方法
1、引入文件
<link rel="stylesheet" href="css/jquery.fullPage.css"><script src="js/jquery.min.js"></script><!-- jquery.easings.min.js 是必须的,用于 easing 参数,也可以使用完整的 jQuery UI 代替 --><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>
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();});
配置
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
- fullPagejs插件
- 插件
- 插件
- 插件
- 插件
- 插件
- 插件
- 插件
- 插件
- 插件
- 插件
- 插件
- 插件
- 插件
- 插件
- 插件
- 插件
- 插件
- <JAVA学习笔记5>——线程同步、安全
- MySQL常用系统表大全
- Underscore.js 入门
- 大数据平台新加接口表(或接口表表结构变更)脚本更新及数据初始化
- >/dev/null 2>&1 & 的惨痛教训
- fullPagejs插件
- 编译时遇到警告的原因
- 树与二叉树
- Android Paint
- 爬虫研究
- web标准
- 归一化的matlab实现
- iOS视图控制对象生命周期-init、viewDidLoad、viewWillAppear、viewDidAppear、viewWillDisappear、viewDidDisappear的区别及用
- U-Boot添加命令的方法及U-Boot命令执行过程