搞快点

fullpage 全屏网站插件

fullpage

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

参考文档 http://www.dowebok.com/77.html

下载地址 https://github.com/alvarotrigo/fullPage.js

基本使用

  1. 引入 jQuery 文件,因为 fullpage 是 jquery 插件
  2. 引入 fullpage 的 js 文件
  3. 页面结构
  4. 编写 js 代码
<!-- 页面结构 -->
<div id="box">
  <!-- 每一个class为section的div都是一屏,section这个类是固定的 -->
  <div class="section">我是内容1</div>
  <div class="section">我是内容2</div>
  <div class="section">我是内容3</div>
  <div class="section">我是内容4</div>
</div>
// 编写js代码
$(function() {
  $('#box').fullpage()
})

鼠标滚轮滚动事件

window.addEventListener('mousewheel', function(e) {
  console.log(e.wheelDelta)
  if (e.wheelDelta > 0) {
    console.log('往上滚了')
  } else {
    console.log('往下滚了')
  }
  console.log('鼠标滚轮事件触发了')
})

常用参数

属性名称描述
sectionsColor设置每一个 section 的背景颜色(为一个数组)
controlArrows定义是否使用箭头来控制幻灯片,默认 true
verticalCentered设定每一个 section 的内容是否垂直居中,默认 true,
resize设定字体是否随着窗口缩放而缩放,默认 false,一般不修改
scrollingSpeed设置滚动的速度,默认 700 毫秒
easing设置动画的方式,默认是 easeInOutCubic,如果想要修改此页,需要引入 jquery.easing.js
css3是否使用 css3 transform 来实现滚动效果,默认 true,不用修改,CSS3 的动画效率比较 js 高。
loopTop滚动到顶部后是否连续滚动到底部,默认 false
loopBottom滚动到底部后是否连续滚动到顶部,默认 false
loopHorizontal设置幻灯片是否循环滚动,默认 true
continuousVertical是否循环滚动,默认为 false,如果设置为 true,则页面会循环滚动,不会出现 loopTop 与 loopBottom 那样的跳动。
autoScrolling是否使用插件的滚动方式,默认 true,如果选择 false,会出现浏览器子代的滚动条,将不会按页滚动,按照滚动进行滚动。
scrollBar是否包含滚动条,默认 false,如果设置为 true,那么浏览器自定的滚动条会出现,这个时候,页面滚动还是按页滚动,但是浏览器也能滚动。不建议开启,不然会不同步。
paddingTop/paddingBottom给每一个 section 设置一个 paddingTop 或者 paddingBottom,默认值为 0,如果需要给页面设置一个固定定位的头部菜单或者底部菜单的时候,可以使用这两个选项。
keyboardScrolling是否可以使用键盘方向键导航,默认 true
navigation是否显示导航,默认为 false,设置为 true,会显示小圆点,作为导航
navigationPositon导航小圆点的位置,设置 left 或者 right,默认是 right
navigationTooltips小圆点的提示信息,鼠标一上去能看到提示信息
showActiveTooltip是否显示当前页面的导航的 tooltip 信息,默认是 false
slidesNavigation是否显示横向幻灯片的导航,默认为 false
slidesNavPosition设置横向幻灯片的位置,top 或者 bottom,默认 bottom
sectionSelectorsection 的选择器,默认是.section
slideSelectorslide 的选择器,默认是.slide

常用回调函数

方法名描述
afterLoad(anchorLink, index)滚动到某一个 section,当滚动结束后,会触发一次这个回调函数,anchorLink 是锚链接的名称,index 从 1 开始计算
onLeave(index,nextIndex,diretion)当我们离开一个 section 时,会触发这个函数,index 是离开的页面的序号,从 1 开始计算。 nextIndex 是滚动到的页面的序号,direction 是往上还是往下滚动,值是 up 或者 down. return false 可以取消滚动
afterResize()窗口大小发生改变后会触发的回调函数
afterSlideLoad(anchor,index, slideAnchor,slideIndex)页面滚动到某一个幻灯片的时候会触发这个回调函数
afterSlideLeave(anchor,index,slideIndex, diretion,nextSlideIndex)当离开某一个幻灯片的时候会触发一次这个回调函数。
赞(0) 打赏
未经允许不得转载:稻草人 » fullpage 全屏网站插件

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址