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 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
个人小程序接入支付解决方案
May 23 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 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
各种战术和打法的原创者
2020/03/04 星际争霸
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
javascript修改图片src的方法
2015/01/27 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python中类型检查的详细介绍
2017/02/13 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
python中requests库session对象的妙用详解
2017/10/30 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
.net C#面试题
2012/08/28 面试题
中文专业毕业生自荐信
2013/10/28 职场文书
学习十八大的心得体会
2014/09/01 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记