jquery实现全屏滚动

前端之家收集整理的这篇文章主要介绍了jquery实现全屏滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在很多情况下,我们需要页面的全屏滚动,尤其是移动端。今天简要的介绍一下全屏滚动的知识。

一.全屏滚动的原理

1.js动态获取屏幕的高度。

获取屏幕的高度,设置每一屏幕的高度。

2.监听mousewheel事件。

监听mousewheel事件,并判断滚轮的方向,向上或向下滚动一屏。

二.jQuery插件fullpages介绍

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

  • 支持鼠标滚动
  • 支持前进后退和键盘控制
  • 多个回调函数
  • 支持手机、平板触摸事件
  • 支持 CSS3 动画
  • 支持窗口缩放
  • 窗口缩放时自动调整
  • 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

使用方法

1、引入文件

猜你在找的jQuery相关文章