在移动端经常会用到全屏滚动插件,实现常见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. Memcached真的过时了吗?

    Memcached真的过时了吗? 这两年Redis火得可以,Redis也常常被当作Memcached的挑战者被提到桌面上来.关于Redis与Memcached的比较更是比比皆是.然而,Redis真的在 ...

  2. Mybatis(一):MyBatis配置文件config.xml详解

    MyBatis 配置文件基本结构 在使用mybatis框架时,首先导入其对应的jar包,并进行相应的配置,所以得对配置文件的每个参数都得了解.一个完全的mybatis配置文件结构如下: <?xm ...

  3. Linux 进程资源用量监控和按用户设置进程限制

    每个 Linux 系统管理员都应该知道如何验证硬件.资源和主要进程的完整性和可用性.另外,基于每个用户设置资源限制也是其中一项必备技能. 在这篇文章中,我们会介绍一些能够确保系统硬件和软件正常工作的方 ...

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

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

  5. 线程相关函数(7)-sem_post(), sem_wait() 信号量

    sem_tsem_initsem_waitsem_trywaitsem_timedwaitsem_postsem_destroy 生产者消费者实例: #include <stdlib.h> ...

  6. 《Kubernetes与云原生应用》系列之容器设计模式

    http://www.infoq.com/cn/articles/kubernetes-and-cloud-native-app-container-design-pattern <Kubern ...

  7. Qt打开文件对话框

    项目中需要打开文件对话框,就查了一下,不得不说Qt的帮助文档做的真好,非常详细.要实现这个功能有两种方式,使用QFileDialog的静态方法,实例化QFileDialog对象. 基本算是照抄帮助文档 ...

  8. 在sql结果中显示行号

    1.准备 create table newtable ( name ), ) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; ); ); ); ); ); 2.实现 ) a ...

  9. GuozhongCrawler看准网爬虫动态切换IP漫爬虫

    有些关于URL去重的方面代码没有提供,须要自己去实现.主要这里提供思路 项目地址:http://git.oschina.net/woshidaniu/GuozhongCrawler/tree/mast ...

  10. PHP——字符串

    <?php //strlen("aaa");取字符串的长度 *** echo strlen("aaaaa"); echo "<br /&g ...