jquery实现全屏滚动


Posted in Javascript onDecember 28, 2015

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

一.全屏滚动的原理
1.js动态获取屏幕的高度。

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

2.监听mousewheel事件。

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

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

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

使用方法

1、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

2、HTML

<div id="dowebok">
  <div class="section">
    <h3>第一屏</h3>
  </div>
  <div class="section">
    <h3>第二屏</h3>
  </div>
  <div class="section">
    <h3>第三屏</h3>
  </div>
  <div class="section">
    <h3>第四屏</h3>
  </div>
</div>

每个 section 代表一屏,默认显示“第一屏”,如果要指定加载页面时显示的“屏幕”,可以在对应的 section 加上class=”active”,如:

<div class="section active">第三屏</div>

同时,可以在 section 内加入 slide(左右滑动),如:

<div id="fullpages">
  <div class="section">第一屏</div>
  <div class="section">第二屏</div>
  <div class="section">
    <div class="slide">第三屏的第一屏</div>
    <div class="slide">第三屏的第二屏</div>
    <div class="slide">第三屏的第三屏</div>
    <div class="slide">第三屏的第四屏</div>
  </div>
  <div class="section">第四屏</div>
</div>

3、JavaScript

$(function(){
  $('#fullpages').fullpage();
});

可以进行跟多的配置:

$(document).ready(function() {
  $('#fullpages').fullpage({
    //Navigation
    menu: '#menu',
    lockAnchors: false,
    anchors:['firstPage', 'secondPage'],
    navigation: false,
    navigationPosition: 'right',
    navigationTooltips: ['firstSlide', 'secondSlide'],
    showActiveTooltip: false,
    slidesNavigation: true,
    slidesNavPosition: 'bottom',

    //Scrolling
    css3: true,
    scrollingSpeed: 700,
    autoScrolling: true,
    fitToSection: true,
    fitToSectionDelay: 1000,
    scrollBar: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    continuousVertical: false,
    normalScrollElements: '#element1, .element2',
    scrollOverflow: false,
    touchSensitivity: 15,
    normalScrollElementTouchThreshold: 5,

    //Accessibility
    keyboardScrolling: true,
    animateAnchor: true,
    recordHistory: true,

    //Design
    controlArrows: true,
    verticalCentered: true,
    resize : false,
    sectionsColor : ['#ccc', '#fff'],
    paddingTop: '3em',
    paddingBottom: '10px',
    fixedElements: '#header, .footer',
    responsiveWidth: 0,
    responsiveHeight: 0,

    //Custom selectors
    sectionSelector: '.section',
    slideSelector: '.slide',

    //events
    onLeave: function(index, nextIndex, direction){},
    afterLoad: function(anchorLink, index){},
    afterRender: function(){},
    afterResize: function(){},
    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
    onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
  });
});

三.动手写全屏滚动
这里主要介绍监听mousewheel事件及滚动。

由于mousewheel事件的兼容性,引用jquery-mousewheel插件来监听滚轮事件。

通过参数delta可以获取鼠标滚轮的方向和速度(旧版本需要传delta参数,新版本不需要,直接用event取)。如果delta的值是负的,那么滚轮就是向下滚动,正的就是向上。

// using on
$('#my_elem').on('mousewheel', function(event) {
  console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

// using the event helper
$('#my_elem').mousewheel(function(event) {
  console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

可以根据需求使用fullpages实现全屏滚动(上下,左右),也可以使用jquery-mousewheel定制不同高度的全屏滚动。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
js 数据类型判断的方法
Dec 03 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 #Javascript
延时加载JavaScript代码提高速度
Dec 27 #Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 #Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 #Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 #Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 #Javascript
JavaScript的removeChild()函数用法详解
Dec 27 #Javascript
You might like
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
node.js require() 源码解读
2015/12/13 Javascript
tab栏切换原理
2017/03/22 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
Python通过命令开启http.server服务器的方法
2017/11/04 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
jupyter实现重新加载模块
2020/04/16 Python
Python用Jira库来操作Jira
2020/12/28 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
意大利男装网店:Vrients
2019/05/02 全球购物
Shell如何接收变量输入
2016/08/06 面试题
新锐科技Java程序员面试题
2016/07/25 面试题
电子商务个人自荐信
2013/12/12 职场文书
经典演讲稿范文
2013/12/30 职场文书
小学生打架检讨书
2014/01/26 职场文书
销售经理工作检讨书
2015/02/19 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
英雄儿女观后感
2015/06/09 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript