jQuery的插件fullpage的使用和基本实现

深碍√TFBOYSˉ_ 2022-11-29 08:07 400阅读 0赞

## fullpage的使用 ##

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

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

**兼容性**  
这个的是他自己下载的插件里面的jQuery的是1.8.3版本的，但是jQuery的兼容是兼容jQuery1.7以上的版本的。  
这个对浏览器的兼容是对IE8以上和其他四大浏览器都兼容的。

**使用方法**  
1、引入文件

我们一般都是引用的是：

//这个是你下载下来的文件里面就已经定义好了一些代码的样式
    <link rel="stylesheet" href="css/jquery.fullPage.css">
    //这个是jQuery包
    <script src="js/jquery-1.8.3.min.js"></script>
    //这个就是你下载下来的一些写的插件包
    <script src="js/jquery.fullPage.js"></script>

还有一些你需要设置一些东西的时候才会需要的一些插件包：

//jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件
    <script src="js/jquery.easings.min.js"></script>
    
    //如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 
    <script src="js/jquery.slimscroll.min.js"></script>

2、HTML代码的使用

例：

<div id="dowebok">
        <div class="section">第一屏</div>
        <div class="section">第二屏</div>
        <div class="section">
        //这个相当于切换到第三屏的时候在元素上面有着slide的class类的时候就可以左右切换
            <div class="slide">第三屏的第一屏</div>
            <div class="slide">第三屏的第二屏</div>
            <div class="slide">第三屏的第三屏</div>
            <div class="slide">第三屏的第四屏</div>
        </div>
        <div class="section">第四屏</div>
    </div>

3、另外一个使用fullpage插件的JavaScript的代码

$(function(){
        $('#dowebok').fullpage();
    });
    1
    2
    3
    我们可以用JavaScript来模拟出上面的fullpage的插件包里面的效果：
    这样也同时节省了一些他给出的css样式的代码：
    例：
    
    //$.fn.extend()是在jQuery里面就有的一种自定义的方式
    $.fn.extend({
        myFullPage:function(config){
            //初始化数据
            //把常用的数据，且又要通过函数执行才能返回，提前准备好了
            var $W = $(this);
            var $Section = $W.find('.section');
            //获取可视区的高度
            var clientWidth = $(window).outerWidth();
            var clientHeiht = $(window).outerHeight();
    
            //数组颜色
            var colorArray = config.colorArray;
    
            var commonStyle = {
                width:'100%',
                height:'100%'
            }
            //样式的初始化
            $('html').add('body')
                .css({
                    position:'relative',
                    overflow:'hidden',
                    margin:0
                })
                    .add($W)
                        .add($Section)
                            .css(commonStyle);
            $W.css({//wrapper独有样式
                position:'absolute',
                left:0,
                top:0
            })
                .find('.section')
                    .each(function(index,ele){
                        $(ele).css({
                        //这你是接收你传入进来的颜色的数组，你如果的是别的就比如说你传人进来的是背景图片的话就要把这里的backgroundColor改为background属性，那么就会影响你传入进来什么都不会有影响的。
                            backgroundColor:colorArray[index],
                            position:'relative'
                        }).find('.slide').css({
                            width:clientWidth,
                            height:clientHeiht
                        }).wrapAll($('<div class="sliderWrapper"></div>'));
                    });
            //横向的切屏样式
            $Section.find('.sliderWrapper').each(function(index,ele){
                $(ele).css({
                    display:'flex',
                    width : $(ele).find('.slide').size() * clientWidth,
                    height : clientHeiht,
                    position:'absolute',
                    left:0,
                    top:0
                });
            })
    
    
            $Section.eq(0).addClass('active').end().find('.sliderWrapper')
                .each(function(index,ele){
                    $(ele).find('.slide').eq(0).addClass('innerActive');
                });
            //0 表示第一个
            var curIndex = 0;
            var lock = true;
            $(document).on('keydown',function(e){
                //垂直移动
                if(e.which== 38 || e.which == 40){
                    if(lock){
                        lock = false;
                        //垂直移动
                        //记录移动方向
                        var direction = null;
                        //当前距离顶部的值
                        var newTop = $W.offset().top;
                        if(e.which == 38 && curIndex != 0){
                            //上
                            direction = 'top';
                            newTop += clientHeiht;
                            curIndex --;
                        }else if(e.which == 40 && curIndex != ($Section.size()-1)){
                            //下
                            direction = 'bottom';
                            newTop -= clientHeiht;
                            curIndex ++;
                        }
                        $W.animate({
                            top:newTop
                        },300,'swing',function(){
                            lock = true;
                            //动态添加active
                            $Section.eq(curIndex).addClass('active');
                            //删除之前的active官方用了一个参数direction
                            if(direction == 'top')
                            {
                                $Section.eq(curIndex + 1).removeClass('active');
                            }else if(direction == 'bottom'){
                                $Section.eq(curIndex - 1).removeClass('active');
                            }
                            //回调函数的执行
                            config.afterLoad(curIndex,direction);
                        }); 
                    }
                }
                //水平移动
                if(e.which == 37 || e.which == 39){
                    if(lock){
                        lock = false;
                        var direction = null;
                        var $SW =  $('.active').find('.sliderWrapper');
                        //移动之前，获取当前显示的dom元素
                        var curShowDom = $SW.find('.innerActive');
                        //当前的左边的距离值
                        var newLeft = $SW.offset().left;
                        if(e.which == 37 && curShowDom.index() != 0){
                            //左
                            direction = 'left';
                            newLeft += clientWidth;
                        }else if(e.which == 39 && curShowDom.index() != $SW.find('.slide').size() - 1){
                            //右
                            direction = 'rigth';
                            newLeft -= clientWidth;
                        }
                        
                        $SW.animate({
                            left:newLeft
                        },300,'swing',function(){
                            lock = true;
                            direction != null ? curShowDom.removeClass('innerActive'):'';
                            if(direction == 'left')
                            {
                               curShowDom.prev().addClass('innerActive');
                            }else if(direction == 'rigth'){
                                curShowDom.next().addClass('innerActive');
                            }
                        }); 
                    }
                }
            })
        }
    });