JQuary中的FullPage属性的用法
$(document).ready(function(){
//常用方法
//$.fn.fullpage.moveSectionUp() //向上滚动一页
//$.fn.fullpage.moveSectionDown() //向下滚动一页
//$.fn.fullpage.moveTo(section,slide) //滚动到第几页的第几个幻灯片,注意:页面从1开始,幻灯片从0开始
//$.fn.fullpage.silentMoveTo(section,slide) //滚动到第几页的第几个幻灯片,但是没有动画效果,注意:页面从1开始,幻灯片从0开始
//$.fn.fullpage.moveSlideRight() //幻灯片向右滚动
// $.fn.fullpage.moveSlideLeft() //幻灯片向左滚动
// $.fn.fullpage.setAutoScrolling(boolean) //动态设置autoScrolling
// $.fn.fullpage.setLockAnchors(boolean) //动态设置LockAnchors
// $.fn.fullpage.setRecordHistory(boolean) //动态设置RecordHistory
// $.fn.fullpage.setScrollingSpeed(milliseconds) //动态设置ScrollingSpeed
// $.fn.fullpage.setAllowScrolling(boolean,[directions]) //添加或删除鼠标滚轮、滑动控制,第一个参数true/false为启用/禁用
//后面的参数为方向,取值包括all,up,down,left,right,可以使用多个,逗号分隔
// $.fn.fullpage.destroy('type')//销毁fullpage特效,type可以不写。或者使用all。不写type,fullpage给页面添加的样式和html元素还在
//如果使用all,则样式\html等全部销毁,页面恢复和不使用fullpage相同的效果
// $.fn.fullpage.reBulid()//重新更新页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果
//页面中添加图片或者视频的时候,只需要使用data-src代替src<img data-src="aa.jpg">
$('#fullpage').fullpage(
{
sectionsColor:['red','yellow','#ccc','black'], //设置页面背景颜色
//controlArrows:false//设置幻灯片是否使用箭头来切换,false适用于手机用户滑动使用
//controlArrowColor:'#ccc'//左右箭头的背景颜色
verticalCentered:true,//设置每一页的内容是否垂直居中,默认为true
resize:true,//字体是否随窗口缩放而缩放,默认为false
scrollingSpeed:700,//设置鼠标滚动速度,默认为700
anchors:['page1','page2','page3','page4'],/*定义锚链接,默认为[]。有了锚链接,用户可以快速打开定位到某一页面。注意定义锚链接时
值不要和页面中的任意的id或name相同,尤其是在IE浏览器下。定义时不需要加#*/
lockAnchors:false,/*是否锁定锚链接,默认为false。如果设置为true,那么定义的锚链接,也就是anchors属性则没有效果。使用较少。*/
//easing:sessionStorage,//定义页面section滚动动画的方式,默认为easeInOutCubic,如果修改此项,需要引入iquery.easings插件,或者jQuery ui。
css3:true,/*是否使用CSS3 transforms来实现滚动效果,默认为true。这个配置项可以提高支持css3的浏览器,比如移动设备等的速度
,如果浏览器不支持css3,则会使用jQuery来代替css3实现滚动效果。*/
// loopTop:false,//滚动到最顶部后是否连续滚动到底部,默认为false。
//loopBottom:false,//滚动到最底部后是否连续滚动回顶部,默认为false,
loopHorizontal:false,//横向slider幻灯片是否循环滚动,默认为true,
autoScrolling:true,/*默认为true,如果选择false,则会出现浏览器自带的滚动条,将不会按页滚动
而是按照滚动条的默认行为来滚动*/
scrollBar:false,/*是否包含滚动条,默认为false,如果在设置为true,则浏览器自带的滚动条出现,页面滚动时还是按页滚动
但是滚动条的默认行为也有效*/
paddingTop:'10px',//设置每一个section顶部的padding,默认为0.如果需要设置一个固定在顶部或者底部的菜单,导航,元素等,可以使用。
paddingBottom:'10px',//设置每一个section底部的padding,默认为0.如果需要设置一个固定在顶部或者底部的菜单,导航,元素等,可以使用。
fixedElements:'#header',//固定的元素,需要配置一个jquery选择器,在页面滚动的时候fixedElements设置的元素固定不动。
keyboardScrolling:false,//是否可以使用键盘方向键导航,默认为true
touchSensitivity:5,//在移动设备中滑动页面的敏感性,默认为5,是按百分比来衡量,最高为100,越大则越难滑动。
continuousVertical:true,/*是否循环滚动,默认为false。如果设置为true,则页面会滚动,而不像looptop或loopbottom
那样出现跳动,注意这个属性和looptop、loopbottom不兼容,不能同时设置*/
animateAnchor:true,//锚链接时否可以控制滚动动画,默认为true。如果设置为false,则通过锚链接定位到某个页面显示不在有动画效果。
recordHistory:true,/*是否记录历史,默认为true,可以记录页面滚动的历史,通过浏览器的前进后退来导航。注意
如果设置autoScrolling:false,那么这个配置也将被关闭,即设置为false。*/
menu:'#fullpageMenu',//绑定菜单,设置相关属性与anchor的值对应后,菜单可以控制滚动,默认为false。可以设置为菜单的jquery的选择器
navigation:true,//是否显示导航,默认为false。如果设置为true,则会显示小圆点,作为导航
navigationPosition:'right',//设置小圆点的位置,可以设置为left或者right
navigationTooltips:['第一页','第二页','第三页','第四页'],//导航小圆点的tooltips设置,也就是指向小圆点时的提示,默认为[],注意按照顺序设置
showActiveTooltip:false,//是否显示当前页面的导航的tooltip信息,无需鼠标指向小圆点,默认为false
slidesNavigation:true,//是否显示横向幻灯片的导航,也就是是否显示幻灯片的小圆点,默认为false。
slidesNavPosition:'top',//横向幻灯片导航(小圆点)的位置,默认为bottom,可以设置为top或者是bottom。
scrollOverflow:false,/*内容超过满屏后是否显示滚动条,默认为false,如果设置为true,则会显示滚动条
,如果要滚动查看内容,还需要引用jquery.slimscroll插件的配合,slimscroll插件主要用于模拟传统的浏览器滚动条*/
sectionSelector:'.fp-section',//section的选择器,默认为.section
slideSelector:'.fp-slide'//slide的选择器,默认为.slide。
}
);
});
JQuary中的FullPage属性的用法的更多相关文章
- 教程-Delphi中Spcomm使用属性及用法详解
Delphi中Spcomm使用属性及用法详解 Delphi是一种具有 功能强大.简便易用和代码执行速度快等优点的可视化快速应用开发工具,它在构架企业信息系统方面发挥着越来越重要的作用,许多程序员愿意选 ...
- css中table-layout:fixed 属性的用法
table-layout:fixed 属性的用法:如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字 不撑破表格的目的,一般是 ...
- 在表格中,th scope="row"和th scope="col"中的scope属性的用法及意义
把表头和数据联系起来:scope,id,headers属性就我用到现在,很多表格要比上面提供的例子复杂的多.让例子复杂一点,我会移去"Company"表头,并且把第一列的数据移到表 ...
- css中一些文本属性的用法
代码 /* text-transform用法 */ .p1 { /* 默认值 */ text-transform: none; } .p2 { /* 每个单词的首字母大写 */ text-transf ...
- CSS中的!important属性用法
关于CSS的运用技巧有很多, 今天主要探讨一下CSS中 !important 这个属性的用法.在CSS的使用中,遇到最多的问题就是不同浏览器之间的兼容问题. 由于IE并不严格执行W3C标准, 而又几乎 ...
- XCODE UITextField 中的属性和用法
XCODE UITextField 中的属性和用法 一些基本的用法 UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedR ...
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- vue.js中的表单radio,select,textarea的v-model属性的用法
只要是表单元素,其值已经不会再用value来定义了,但是placeholder还是可以用来设置默认值. section1--input:type="text" type=" ...
- php中的var关键字的用法总结(var在类外用报错)(类属性必须带限定词)
php中的var关键字的用法总结(var在类外用报错)(类属性必须带限定词) 一.总结 1.var在类外用报错:如果不是在类中,用var定义变量是错的. 2.类属性必须带限定词:php中类属性必须定义 ...
随机推荐
- HDU 6215 Brute Force Sorting(链表)
http://acm.hdu.edu.cn/showproblem.php?pid=6215 题意:给出一个序列,对于每个数,它必须大于等于它前一个数,小于等于后一个数,如果不满足,就删去.然后继续去 ...
- 利用JavaScriptSOAPClient直接调用webService --完整的前后台配置与调用示例
JavaScriptSoapClient下载地址:https://archive.codeplex.com/?p=javascriptsoapclient JavaScriptSoapClient的D ...
- 使用JS与CSS3的翻转实现3D翻牌效果
之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角, ...
- python 操作剪切板
python3 在使用网上找到的一些使用剪切板的片段时发现存在写入剪切板后乱码的情况, 研究后发现python3不能使用SetClipboardData方法, 要使用SetClipboardText ...
- bufferedReader中的数据, 只是读过一次, 就没有了(拿走,自然就没了),只能读一次( load, readLine 等只要是读操作)
- 认识flask框架
1.框架的基本认识: 特点:用Python语言实现的轻量.简洁.扩展性强. 核心:werkzeug和Jinja2 2.虚拟环境: 创建:mkvirtualenv -p python3 名称 进入:wo ...
- QSplitter实现滑动窗口和悬浮按钮
1 QSplitter实现滑动窗口和悬浮按钮 软件应用中需要设计右侧滑动窗口,通过一个按钮来实现窗口的隐藏和显示,应用场景比如显示主界面的详细信息. (1) 在qt design中 ...
- linux基础07-bash编程(变量,变量类型)
(1)shell: 弱类型编程语言 强:变量在使用前,必须事先声明,甚至还需要初始化:弱:变量用时声明,甚至不区分类型: 变量赋值:VAR_NAME=VALUE (2)bash变量类型: 环境变量 本 ...
- Linux下查/删/替 命令(转)
▪查看某目录下所有文件的个数: [root@localhost1 opt]# ls -l |grep "^-"|wc -l ▪查看某目录下所有文件的个数,包括子目录里面的: [ro ...
- Python 读写操作Excel —— 安装第三方库(xlrd、xlwt、xlutils、openpyxl)
数据处理是 Python 的一大应用场景,而 Excel 则是最流行的数据处理软件.因此用 Python 进行数据相关的工作时,难免要和 Excel 打交道. 如果仅仅是要以表单形式保存数据,可以借助 ...