fullPage插件使用
fullPage插件
fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
1.引文件
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<!-- jquery.easings.min.js 用于 easing 参数,也可以使用完整的 jQuery UI 代替,如果不需要设置 easing 参数,可去掉改文件 -->
<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="dowebok">
<div class="section">
<h3>第一屏</h3>
</div>
<div class="section">
<h3>第二屏</h3>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
</div>
</div>
3.JavaScript
$(function(){
$('#dowebok').fullpage();
});
可选配置
选项 |类型 |默认值 |说明
slidesColor |函数 |无 |设置背景颜色
navigation |布尔值 |false |是否显示项目导航
scrollingSpeed |整数 |700 |滚动速度,单位为毫秒
navigationPosition |字符串 |right |项目导航的位置,可选 left 或 right
navigationTooltips |数组 |null |项目导航的 tip
keyboardScrolling |布尔值 |true |是否使用键盘方向键导航
方法 |说明
moveSectionUp() |向上滚动
moveSectionDown() |向下滚动
moveTo(section, slide) |滚动到
moveSlideRight() |向右
moveSlideLeft() |向左
setAllowScrolling() |添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling() |添加或删除键盘方向键控制
回调函数 |说明
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个参数
代码
$(function(){
//屏幕的高度
var sh = $(window).height();
$(".demo").fullpage({
sectionsColor: ["#f9dd67", "#84a2d4", "#ef674d", "#ffeedd", "#cf4759", "#84d9ed", "#8ac060", "#97dff0"],
navigation: true,
// anchorIndex: 锚链接的索引数, index当前第几屏, 从1开始
afterLoad: function(anchorIndex, index) {
//把所有屏的js添加的动画全部清掉
$(".section img, .section div").attr("style", "");
// 给当前屏,添加animation的类
//先把其它屏的动画清空
$(".section").removeClass("animation");
$(".section").eq(index-1).addClass("animation");
//如果是第二屏
if (index == 2) {
//...
}
//第三屏是纯用css来实现的
if (index == 4) {
//...
}
//第六屏
if (index == 6) {
//...
}
//第八屏
if (index == 8) {
//...
}
}
});
});
可以配合c3的动画来实现
配置参考地址:
http://www.dowebok.com/77.html
fullPage插件使用的更多相关文章
- fullpage 插件学习心得
fullpage.js 是一个基于jquery 的插件,它能够轻松的制作出高大上的全屏网站,主要功能有; 1.支持鼠标滚动 2.支持前进后退和键盘控制 3.多个回调函数 4.支持 CSS3 动画 5. ...
- fullpage插件在移动端弹出键盘页面特殊处理
fullpage插件大家都很熟悉 jquery一款全屏上下滑动的插件. 最近做公司一个活动移动端使用fullpage插件填写input的时候遇见一个问题,手机自带的键盘弹出的时候会把页面顶出去,页面错 ...
- 自己动手写fullPage插件
仿造fullPage.js https://alvarotrigo.com/fullPage/#firstPage 自己参照网上教程写了一个,加了注释.主要是练习造轮子的能力,需求是不断变化的只拿来用 ...
- 制作手机相册 全屏滚动插件fullpage.js
今天是端午自己做了一个小的送祝福链接 这里用到了fullpage插件 $('#container').fullpage({ navigation: false, //navigatio ...
- FullPage.js-基于 jQuery 的插件全屏滚动插件
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...
- JQuery插件制作动态网页
运用JQuery插件制作动态网页 前 言 JQuery 今天我给大家介绍一个运用JQuery插件制作的动态网页--iphone 5C 宣传页面.这个网页中运用到了fullpage.js和move ...
- Fullpage参数说明
参数说明 $(document).ready(function() { $('#fullpage').fullpage({ //Navigation menu: false,//绑定菜单,设定的相关属 ...
- jQuery 插件运用
1. fullpage 插件(全屏) 官网:http://www.jq22.com/ jqueryui 官网:http://jqueryui.com/draggable/ 1.1 使用方法 引入文件 ...
- TinyMCE常用插件
Advanced Tables 基于table插件的增强表格插件,添加了排序功能. tinymce.init({ plugins: 'table advtable', menubar: 'table' ...
随机推荐
- C# 网页内容获取
private string GetGeneralContent(string strUrl) { string strMsg = string.Empty; try { WebRequest req ...
- Apache2.2 启动和停止命令
1.启动:net start apache2.2 2.停止:net stop apache2.2
- javaee IO流复制的方法
package Zjshuchu; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.FileN ...
- 【WPS】表格使用VBA宏编程写入ini文件实现软件多语言
前言:公司软件最近在做多语言版本,而又来一个西班牙文版本的,之前已经做过中文版本,英文版本和法文版本,之前是同事做的,现在安排我做,之前的做法,使用wps表格,翻译好,然后一个一个复制粘贴到ini文件 ...
- xpath定位实列
这次将讲Xpath定位! 什么是Xpath: Path就是路径,xpath也类似,就像 在DOS中 D:\Auto\jack. Xpath的使用: 1:在火狐下载 FirePath 插件(图1),然后 ...
- 51nod1596 搬货物
现在有n个货物,第i个货物的重量是 2wi .每次搬的时候要求货物重量的总和是一个2的幂.问最少要搬几次能把所有的货物搬完. 样例解释: 1,1,2作为一组. 3,3作为一组. Input 单组测试数 ...
- 洛谷P1443 马的遍历【BFS】
题目描述 有一个n*m的棋盘(1<n,m<=400),在某个点上有一个马,要求你计算出马到达棋盘上任意一个点最少要走几步 输入输出格式 输入格式: 一行四个数据,棋盘的大小和马的坐标 输出 ...
- rmq问题和lca可以相互转化
Sparse Table算法 一般RMQ的Sparse Table(ST)算法是基于倍增思想设计的O(Nlog2N) – O(1)在线算法 算法记录从每个元素开始的连续的长度为2k的区间中元素的最小值 ...
- 修改电脑名称后,Oracle客户端连不上
有以下几个步骤可以尝试,帮助大家缩小错误范围. 1 命令窗口使用sqlplus查看数据库服务是否正常,如下图,没有出现“连接到:”表示数据库服务不正常. 2 在任务管理器中查看数据库的监听是否已经 ...
- 0929MySQL JOIN的算法
http://www.cnblogs.com/starhu/p/6418842.html http://www.cnblogs.com/starhu/p/6418833.html http://www ...