jquery实现全屏滚动
jquery实现全屏滚动
发布时间:2016-12-30 来源:查字典编辑
摘要:在很多情况下,我们需要页面的全屏滚动,尤其是移动端。今天简要的介绍一下全屏滚动的知识。一.全屏滚动的原理1.js动态获取屏幕的高度。获取屏幕...

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

一.全屏滚动的原理

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> <h3>第一屏</h3> </div> <div> <h3>第二屏</h3> </div> <div> <h3>第三屏</h3> </div> <div> <h3>第四屏</h3> </div> </div>

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

<div>第三屏</div>

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

<div id="fullpages"> <div>第一屏</div> <div>第二屏</div> <div> <div>第三屏的第一屏</div> <div>第三屏的第二屏</div> <div>第三屏的第三屏</div> <div>第三屏的第四屏</div> </div> <div>第四屏</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教程学习
编程开发子分类