jquery--fullPage.js

来源：互联网发布：java程序员必看的书籍编辑：程序博客网时间：2024/06/03 13:47

简介

fullPage.js是一个基于jQuery的全屏滚动插件，她能够很方便、很轻松的制作出全屏网站。

主要功能

.支持鼠标滚动

.支持前进后退和键盘控制

.多个回调函数

.支持手机、平板触摸事件

.css3动画

.支持窗口缩放

.窗口缩放时自动调整

.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等。

兼容性

fullPage.js支持IE+及其他现代浏览器。

源码下载

github下载

1、最基本的模板

<!DOCTYPE html><html><head><meta charset="utf-8"><title>fullPage.js模板</title><link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /><!--google在国内不太行<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>--><!--百度cdn--><script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". --><script type="text/javascript" src="vendors/jquery.easings.min.js"></script><!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true`--><script type="text/javascript" src="vendors/jquery.slimscroll.js"></script> <script type="text/javascript" src="jquery.fullPage.js"></script><!--自定义--><script>//初始化fullPage.js$(document).ready(function(){$('#fullpage').fullpage();});</script></head><body><div id="fullpage">    <div class="section"> section1</div>    <div class="section">    <div class="slide"> Slide 1 </div>    <div class="slide"> Slide 2 </div>    <div class="slide"> Slide 3 </div>    <div class="slide"> Slide 4 </div></div>    <div class="section"> section3</div>    <div class="section"> section4</div></div></body></html>

1、属性

2、方法

3、回调函数

例子1--属性

<!DOCTYPE html><html><head><meta charset="utf-8"><title>fullPage.js模板</title><link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /><!--google在国内不太行<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>--><!--百度cdn--><script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". --><script type="text/javascript" src="vendors/jquery.easings.min.js"></script><!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true`--><script type="text/javascript" src="vendors/jquery.slimscroll.js"></script> <script type="text/javascript" src="jquery.fullPage.js"></script><!--自定义--><script>//初始化fullPage.js$(document).ready(function() {    $('#fullpage').fullpage({    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE'],//可以为每个section设置background-color属性。                //controlArrows:true, //定义是否通过箭头来控制slide幻灯片,默认为true。当我们设置为false，则幻灯片左右两侧的箭头就会消失，在移动设备上，我们可以通过滑动来操作幻灯片。                //verticalCentered: false, //每一页的内容是否垂直居中，默认为true。一般我们保持默认值。        //resize: true, //字体是否随着窗口缩放而缩放，默认为false。        //scrollingSpeed: 1000, //滚动速度，单位为毫秒，默认为700。        anchors: ['firstPage','secondPage','thirdPage'], //定义锚链接，默认值为[]。有了锚链接，用户就可以快速打开定位到某一页面。注意定义锚链接的时候，值不要和页面的id和name相同，尤其是在ie浏览器下。而且定义时不需要加#        //lockAnchors: true, //是否锁定锚链接，默认为false。如果设置为true，那么定义的锚链接，也就是anchors属性则没有效果。这个配置项使用的比较少。        //easing: 'easeInOutCubic',//定义页面section滚动的动画方式，默认为easeInOutCubic，如果修改此项，需要引入jquery.easing插件，或者jquery ui。        //css3: false,//是否使用CSS3 transfroms来实现滚动效果，默认为true。这个配置项可以提高支持css3的浏览器，比如移动设备等的速度，如果浏览器不支持css3，则会使用jquery来替代css3实现css3滚动效果。        //loopTop: true, //滚动到最顶部后是否连续滚动到底部，默认为false。        //loopBottom: true //滚动到最底部后是否连续滚动到顶部，默认为false。        //loopHorizontal: false //横向slider幻灯片是否循环滚动，默认为true。        //autoScrolling: false//是否使用插件的滚动方式，默认为true，如果选择false，则会出现浏览器自带的滚动条，将不会按页滚动，而是按照滚动条的默认行为来滚动。        //scrollBar: true//是否包含滚动条，默认为false，如果设置为true，则浏览器自带的滚动条出现，页面滚动式还是按页滚动，但是滚动条的默认行为也有效。        //paddingTop/paddingBottom设置每一个section顶部喝1底部的padding，默认都为0.一般我们需要设置一个固定在顶部或者底部的菜单、导航、元素等，可以使用这两个配置项。    //paddingTop: '100px',        //paddingBottom: '100px'        fixedElements: '#header, .footer',//固定的元素，默认为null，需要配置一个jquery选择器。在页面滚动的时候，fixedElements设置的元素固定不动。要加上position: fixed;这个属性才可以。        //keyboardScrolling: false//是否可以使用键盘方向键导航，默认为true。        //touchSensitivity: 15//在移动设备中滑动页面的敏感性，默认为5，是按百分比来衡量，最高为100，越大则越难滑动。        //continuousVertical: true//是否循环滚动，默认为false。如果设置为true，则页面会循环滚动，而不像looTop或loopBottom那样出现跳动，注意这个属性和loopTop、loopBottom不兼容，不要同时设置。        //animateAnchor: false//锚链接是否可以控制滚动动画，默认为true。如果设置为false，则通过锚链接定位到某个页面显示不再有动画效果。        //recordHistory: false//是否记录历史，默认为true，可以记录页面滚动的历史，通过浏览器的前进后退来导航。注意如果设置了autoScrolling:false,那么这个配置也将被关闭，即设置为false。        menu: '#myMenu',//绑定菜单，设定的相关属性与anchor的值对应后，菜单可以控制滚动，默认为false。可以设置为菜单的jquery选择器。也要配置该属性position: fixed;        navigation: true,//是否显示导航，默认为false。如果设置为true，会显示小圆点，作为导航。        navigationPosition: 'right',//导航小圆点的位置，可以设置为left或者right        navigationTooltips: ['firstPage','secondPage','thirdPage'],//导航小圆点的tooltips设置，默认为[]，注意按照顺序设置。        //showActiveTooltip: true,//是否显示当前页面的导航得tooltip信息，默认为false        slidesNavigation: true,//是否显示横向幻灯片的导航，默认为false        slidesNavPosition: 'bottom',//横向幻灯片导航得位置，默认为bottom，可以设置为top或bottom        scrollOverflow: true,//内容超过满屏后是否显示滚动条，默认为false。如果设置为true，则会显示滚动条，如果要滚动查看内容，还需要jquery.slimscroll插件的配合。slimscroll插件主要用于模拟传统的浏览器滚动条。        sectionSelector: '.section',//section的选择器，默认为.section        slideSelector: '.slide',//slide的选择器，默认为.slide    });});</script><style>#header{position: fixed;top: 0;right: 200px;font-size: 50px;}.footer{position: fixed;bottom: 0;right: 200px;font-size: 50px;}.slide{font-size: 30px;text-align: center;}#myMenu{position: fixed;top: 0;z-index: 999;}</style></head><body><!--菜单--><ul id="myMenu">    <li data-menuanchor="firstPage"><a href="#firstPage">First section</a></li>    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>    <li data-menuanchor="thirdPage"  class="active"><a href="#thirdPage">Third section</a></li></ul><div id="header">Header</div><div id="fullpage">    <div class="section">section1</div>    <div class="section">    <div class="slide"> Slide 1 </div>    <div class="slide"> Slide 2 </div>    <div class="slide"> Slide 3 </div>    <div class="slide"> Slide 4 </div>    </div>    <!--active 初始化激活，默认跳到这个页面-->    <div class="section active">section3</div></div><div class="footer">footer</div></body></html>

例子2--官网例子

$(document).ready(function() {    $('#fullpage').fullpage({        //Navigation        menu: false,        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){}    });});

详情请看官网文档

https://github.com/alvarotrigo/fullPage.js/tree/master

0 0