在移动端经常会用到全屏滚动插件,实现常见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. laravel 数据库查询的一些函数意义(未完)

    ->all() 查询数据库中的全部信息,一对象形式返回 $rows=UserModel::all(); ->get() 查询的执行函数,->toArray()将查询的是数据集转换成数 ...

  2. Eclipse 最有用的快捷键

    Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升.    ...

  3. 03、Windows Phone 套接字(Socket)实战之WP客户端设计

    因为 PC 端和 WP 端进行通信时,采用的自定义的协议,所以也需要定义 DataType 类来判断 通信数据的类型,并且把数据的描述信息(head) 和数据的实际内容(body)进行拼接和反转,所以 ...

  4. dubbo相关

    1 面试题:Dubbo中zookeeper做注册中心,如果注册中心集群都挂掉,发布者和订阅者之间还能通信么? 可以的,启动dubbo时,消费者会从zk拉取注册的生产者的地址接口等数据,缓存在本地.每次 ...

  5. [转]软件测试 Top 120 Blog (博客)

    [转]软件测试 Top 120 Blog (博客) 2015-06-08 转自:    软件测试 Top 120 Blog (博客) # Site Author Memo DevelopSense M ...

  6. NFC读卡APP

    # 设计文档 ### 简介----------------------------- 这个APP的功能是使用手机的NFC读卡器功能,做到读取卡片支持M1卡和CPU卡. ### 功能列表-------- ...

  7. python学习笔记(11)--爬虫下载漫画图片

    说明: 1. 某本子网站爬虫,现在只实现了扒取一页,已经凌晨两点了,又饿又困,先睡觉,明天再写总结吧! 2. 我是明天,我来写总结了! 3. 这个网站的结构是这样的: 主页: 主页-第1页-漫画1封面 ...

  8. 一款基于jQuery的超酷动画幻灯片

    今天给大家带来一款仿步步高vivo手机网站的一款首页焦点幻灯展示特效,带有超酷炫的动画特效,动态效果丝毫不逊色于flash动画,具有很强的视觉冲击力,推荐下载学习! 提示:兼容360.FireFox. ...

  9. lua工具库penlight--02表和数组

    类Python的List lua的优美之处在于把数组和关联数组都用table实现了(Python中叫list和dict,C++中叫vector和map). 一般我们把数字索引的table叫做list. ...

  10. 幸好会java

    转做android的可能性又往前增加了一分.