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 ...
随机推荐
- web.xml文件书写规则
在为class文件写xml配置文件的书写规则,需要书写的东西如下 <servlet> <servlet-name></servlet-name> <servl ...
- MySQL慢查询查找和调优测试
MySQL慢查询查找和调优测试,接下来详细介绍,需要了解的朋友可以参考下.本文参考自:http://www.jbxue.com/db/4376.html 编辑 my.cnf或者my.ini文件,去除 ...
- Error-Project facet Java version 1.8 is not supported
最近导入最新的Strtus2.5.10.1 Demo时出现了这个错误 解决方案如下: 选中工程——右键——Properties 然后依次展开找到如图所示内容,将1.8改成1.7即可. 原因:工程默认配 ...
- python—networkx:在一张图中画出多个子图
通过plt.subplot能够在一张图中画出多个子图 #coding: utf-8 #!/usr/bin/env python """ Draw a graph with ...
- 解决The markup in the document following the root element must be well-formed.
出现问题的代码: <security-constraint> <web-resource-collection> <web-resource-name>Regist ...
- 基础地图Android SDK
开发者可利用SDK提供的接口,使用百度为您提供的基础地图数据.目前百度地图SDK所提供的地图等级为3-21级,所包含的信息有建筑物.道路.河流.学校.公园等内容. V3.7.0起,地图支持缩放至21级 ...
- php代码检查
最近写php,几个同事都是没写过c的,经常写的变量没有定义,而php没有编译,错误无法发现. 我们现在用的是NetBeans,好在其提供了语法检测,如下图,让编辑器强制显示我错误
- EntityFramework使用Code First模式创建数据库控制生成单数形式的表名
使用Code-First模式生成数据库时,默认生成的数据库表的名称为类型的复数形式,例如实体类名称是"User",默认生成的数据库表名为“Users”,多数情况下我们并不想生成的数 ...
- 树莓派teamviewer远程 windows远程桌面
https://mirror.tuna.tsinghua.edu.cn/help/raspbian/ 用这个源后,再安装 apt-get update https://download.teamvie ...
- jackson 不拼null节点的注解
http://blog.sina.com.cn/s/blog_544a7be401011url.html ——————————————————————————————————————————————— ...