fullpage.js全屏滚动插件使用方法
在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件
fullpage.js插件的API:http://www.dowebok.com/77.html
常用使用方法:
// 配置示例
$.fn.fullpage({
anchors:["page1","page2","page3"],
slidesColor:["#fff","#000","#333"]
})
//方法调用示例
//moveTo(section, slide)设置屏幕滚动到某个section或slide,两个参数都是某个内容块的索引值或者是锚文本,默认情况下slide的索引被设置为0。
$.fn.fullpage.moveTo(1,0) //有动画效果
$.fn.fullpage.silentMoveTo(1,0) //没有动画效果
//回调函数
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
slidesColor:["#fff","#000","#333","#666","#999"], // 滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数。
// anchorLink 是锚链接的名称
// index 是section的索引,从1开始计算
afterLoad: function(anchorLink, index){
var loadedSection = $(this);
//using index
if(index == 3){
alert("Section 3 ended loading");
}
//using anchorLink
if(anchorLink == 'secondSlide'){
alert("Section 2 ended loading");
}
}
// 滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数
// index 是离开的“页面”的序号,从1开始计算;
// nextIndex 是滚动到的“页面”的序号,从1开始计算;
// direction 判断往上滚动还是往下滚动,值是 up 或 down。
onLeave: function(anchorLink, index){
var leavingSection = $(this);
//after leaving section 2
if(index == 2 && direction =='down'){
alert("Going to section 3!");
}
else if(index == 2 && direction == 'up'){
alert("Going to section 1!");
}
}
});
找到一个很不错的帮助文档:帮助文档
fullpage.js全屏滚动插件使用方法的更多相关文章
- jquery.fullPage.js全屏滚动插件教程演示
css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...
- fullpage.js全屏滚动插件使用小结
刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...
- FullPage.js全屏滚动插件的配置项、方法和回调函数
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...
- FullPage.js全屏滚动插件学习总结
如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果 ...
- FullPage.js全屏滚动插件
一.介绍 fullPage.js是一个基于jQuery的插件,他能够很方便.很轻松的制作出全屏网站,主要功能有: 1.支持鼠标滚动 2.多个回调函数 3.支持手机.平板触摸事件 4.支持CSS3动画 ...
- jquery.fullPage.js全屏滚动插件
注:本文内容复制于http://www.51xuediannao.com/js/jquery/jquery.fullPage.html 和 http://www.360doc.com/content/ ...
- fullPage.js全屏滚动插件API
API sectionsColor:['green','orange','red','lime']; //设置背景颜色 可以为每一个section设置background-color属性 contro ...
- FullPage.js全屏滚动插件解说
1.主要功能 1).支持鼠标滚动 2).多个回调函数 3).支持手机.平板触屏事件 4).支持css3动画 5).支持窗口缩放 6).窗口缩放时自动调整 7).可设置滚动宽度.背景颜色.滚动速度.循环 ...
- jQuery fullPage.js 全屏滚动
fullPage 是一款不依赖任何 js 库的全屏滚动组件,支持垂直/水平滚动.CSS3 旋转/缩放动画,支持 IE5.5+,支持移动设备. 在线实例 垂直滚动 水平滚动 CSS3 动画1 CSS3 ...
随机推荐
- [转]sql:除非另外还指定了 TOP 或 FOR XML,否则,ORDER BY 子句在视图、内联函数、派生表、子查询
执行sql语句: select * from ( select * from tab where ID>20 order by userID desc ) as a order by date ...
- SimpleDateFormat线程不安全及解决的方法
一. 为什么SimpleDateFormat不是线程安全的? Java源代码例如以下: /** * Date formats are not synchronized. * It is recomme ...
- CSectsInfomation.cpp文件
#include "SectsInfomation.h" #include "WidgetMgr.h" #include "XButton.h&quo ...
- table中添加下拉框
{ file: 'usename', title: '下发用户', width:"20%", align: 'center', templet: function (d) { va ...
- (转载) STL中map用法详解
Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成有可能在我们处理一对一数据的时候 ...
- js 開始时间,当前时间,结束时间的比較
//開始时间不能小于当前时间 function startTimeIsBigThanTotay(startTime){ var startdate = new Date((startTime).rep ...
- CentOS下yum安装PostgreSQL
关键词:centos install PostgreSQL Configure YUM repository vim /etc/yum.repos.d/CentOS-Base.repo [base] ...
- PHP 汉字转成拼音
<?php class ZH{ /** * 将字符串转化为拼音 */ function Pinyin($_String, $_Code='gb2312') { $_DataKey =" ...
- Css三栏布局自适应实现几种方法
Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...
- 重新=》easyui DataGrid是否可以动态的改变列显示的顺序
$.extend($.fn.datagrid.methods,{ columnMoving: function(jq){ return jq.each(function(){ var target = ...