在移动端经常会用到全屏滚动插件,实现常见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全屏滚动插件使用方法的更多相关文章

  1. jquery.fullPage.js全屏滚动插件教程演示

    css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...

  2. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  3. FullPage.js全屏滚动插件的配置项、方法和回调函数

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...

  4. FullPage.js全屏滚动插件学习总结

    如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果 ...

  5. FullPage.js全屏滚动插件

    一.介绍 fullPage.js是一个基于jQuery的插件,他能够很方便.很轻松的制作出全屏网站,主要功能有: 1.支持鼠标滚动 2.多个回调函数 3.支持手机.平板触摸事件 4.支持CSS3动画 ...

  6. jquery.fullPage.js全屏滚动插件

    注:本文内容复制于http://www.51xuediannao.com/js/jquery/jquery.fullPage.html 和 http://www.360doc.com/content/ ...

  7. fullPage.js全屏滚动插件API

    API sectionsColor:['green','orange','red','lime']; //设置背景颜色 可以为每一个section设置background-color属性 contro ...

  8. FullPage.js全屏滚动插件解说

    1.主要功能 1).支持鼠标滚动 2).多个回调函数 3).支持手机.平板触屏事件 4).支持css3动画 5).支持窗口缩放 6).窗口缩放时自动调整 7).可设置滚动宽度.背景颜色.滚动速度.循环 ...

  9. jQuery fullPage.js 全屏滚动

    fullPage 是一款不依赖任何 js 库的全屏滚动组件,支持垂直/水平滚动.CSS3 旋转/缩放动画,支持 IE5.5+,支持移动设备. 在线实例 垂直滚动 水平滚动 CSS3 动画1 CSS3 ...

随机推荐

  1. 在windows10下搭建ubuntu环境

    虽然win10下搞了一个ubuntu子系统,但是还是各种不习惯,经过一番研究,我还是选择下面的组合来搭建: Git Bash + ConEmu + MinGW15.3 + vim + chocolat ...

  2. 彻底清除Linux centos minerd木马 实战  跟redis的设置有关

    top -c把cpu占用最多的进程找出来: Tasks: total, running, sleeping, stopped, zombie Cpu(s): 72.2%us, 5.9%sy, 0.0% ...

  3. HDU 1863 畅通工程 克鲁斯卡尔算法

    畅通工程 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. (3)FluidMoveBehavior 之模仿 Windows Phone 开始菜单的 Tile 长按后排序

    这个工程和上一篇 (2)中介绍的排序大同小异,只是比上一篇交换复杂一点,不是通过单击进行交换, 而是拖动一个 Tile 到另一个 Tile 上时,判断两个 Tile 的中心距离是否符合条件来判断是否进 ...

  5. python中sorted方法和列表的sort方法使用详解

    一.基本形式 列表有自己的sort方法,其对列表进行原址排序,既然是原址排序,那显然元组不可能拥有这种方法,因为元组是不可修改的. 排序,数字.字符串按照ASCII,中文按照unicode从小到大排序 ...

  6. ajax请求数据动态渲染表格

    $.ajax({ url: "/flow/userTaskFileShow.cc", data: {"processDefinitionId": pdid, & ...

  7. Java并发之彻底搞懂偏向锁升级为轻量级锁

    网上有许多讲偏向锁,轻量级锁的文章,但对偏向锁如何升级讲的不够明白,有些文章还相互矛盾,经过对jvm源码(biasedLocking.cpp)的仔细分析和追踪,基本升级过程有了一个清晰的过程,现将升级 ...

  8. 0066 阿里云大学的几道Java基础测试题

    阿里云大学的几道Java基础测试题: https://edu.aliyun.com/clouder/exam/intro/15 https://edu.aliyun.com/clouder/exam/ ...

  9. 基于jQ+CSS3页面滚动内容元素动画特效

    今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...

  10. Ubuntu 12.04 Subversion及GUI客户端RabbitVCS安装

    (经过一天的使用,发现pygtk的内存泄漏问题严重影响使用,需要打一下deepin ui做的补丁:https://github.com/linuxdeepin/deepin-ui) 1. 类似Tort ...