fullpage全屏插件、详细参数,fullpage.js方法

fullpage 全屏插件

用原生的js实现也是可以的,用mousewheel(鼠标滚轮事件),来判断向上滚还是向下滚,设定滚动的高度等于屏幕的高度就可以,虽然实现起来也比较简单,但是兼容性不好

fullPage.js 是一个基于 jQuery 的插件,它能够帮你很方便、很轻松的制作出全屏网站。

github 官网 https://github.com/alvarotrigo/fullPage.js

中文演示地址 http://www.dowebok.com/demo/2014/77/

主要功能有:

支持鼠标滚动

支持前进后退和键盘控制

多个回调函数

支持手机、平板触摸事件

支持 CSS3 动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

fullpage 详细参数

选项类型默认值说明
verticalCentered字符串true内容是否垂直居中
resize布尔值false字体是否随着窗口缩放而缩放
sectionColor函数设置背景颜色
anchors数组定义锚链接
scrollingSpeed整数700滚动速度,单位为毫秒
easing字符串easeInQuart滚动动画方式
menu布尔值false绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动
navigation布尔值false是否显示项目导航
navigationPosition字符串right项目导航的位置,可选 left 或 right
navigationTooltips数组项目导航的 tip
slidesNavigation布尔值false是否显示左右滑块的项目导航
slidesNavPosition字符串bottom左右滑块的项目导航的位置,可选 top 或 bottom
controlArrowColor字符串#fff左右滑块的箭头的背景颜色
loopBottom布尔值false滚动到最底部后是否滚回顶部
loopTop布尔值false滚动到最顶部后是否滚底部
loopHorizontal布尔值true左右滑块是否循环滑动
autoScrolling布尔值true是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条
scrollOverflow布尔值false内容超过满屏后是否显示滚动条
css3布尔值false是否使用 CSS3 transforms 滚动
paddingTop字符串0与顶部的距离
paddingBottom字符串0与底部距离
fixedElements字符串
normalScrollElements
keyboardScrolling布尔值true是否使用键盘方向键导航
touchSensitivity整数5
continuousVertical布尔值false是否循环滚动,与 loopTop 及 loopBottom 不兼容
animateAnchor布尔值true
normalScrollElementTouchThreshold整数5

fullPage.js 方法

注意方法的使用时需要添加:

$.fn.fullpage 比如

$.fn.fullpage.moveTo(1);
名称说明
moveSectionUp()向上滚动
moveSectionDown()向下滚动
moveTo(section, slide)滚动到
moveSlideRight()slide 向右滚动
moveSlideLeft()slide 向左滚动
setAutoScrolling()设置页面滚动方式,设置为 true 时自动滚动
setAllowScrolling()添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling()添加或删除键盘方向键控制
setScrollingSpeed()定义以毫秒为单位的滚动速度
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery.fullpage.min.js是一个jQuery插件,用于创建全屏滚动的网页布局。它是由国内开发者Alvaro Trigo开发的,非常流行和常用。 要下载jquery.fullpage.min.js,可以在官方网站上进行下载。可以在百度或者谷歌搜索“jquery.fullpage.min.js官网”,然后打开官网页面。在页面上可以找到下载链接,点击下载即可。一般来说,官网提供了多个版本的下载,包括压缩版、非压缩版和CDN版,可以根据自己的需要选择合适的版本进行下载。 在下载之前,我们需要找到合适的版本。可以查看官网上的文档,了解每个版本的特点和适用场景,根据自己的需求选择合适的版本。如果不确定该使用哪个版本,可以选择默认版本进行下载。 下载完成后,我们将jquery.fullpage.min.js文件添加到我们的项目中。一般来说,我们需要将文件放在项目的js文件夹内。然后,在我们的HTML文件中通过script标签引入该文件,确保它在其他jQuery相关文件之后引入。 引入成功后,我们就可以在项目中使用jquery.fullpage.min.js插件了。可以参考官方文档,了解如何使用该插件以及提供的各种配置选项。根据自己的需求,可以通过调用相应的方法和设置相应的参数来实现全屏滚动效果。 总的来说,下载jquery.fullpage.min.js只需要访问官网,选择合适的版本进行下载,并将文件添加到项目中即可。通过学习文档和掌握使用方法,我们可以在自己的项目中实现全屏滚动效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值