jQuery实现类似fullpage插件的全屏滚动效果

很久没用fullpage插件来实现全屏效果的滚动了,我自己整理了一个比较简单的PC版全屏滚动代码,之前在做专题的时候自己还写了一个很复杂的代码,还洋洋得意,后来看网上的一个写法,发现自己写的复杂了,我之前的版本是通过控制上一屏和下一屏的同时改变样式。

但其实这种滚动效果给父类元素就好了,这样子就只需要控制父类元素向上或者向下就行。不用去纠结上一屏和下一屏。

结合网上的思路,加上我之前自己做的代码,代码有这几种功能:

1.头部和尾部的内容可以不用滚动,只要中间的滚动就行。

2.支持上一屏和下一屏的动画触发

3.支持下一页和上一页导航跳转

4.支持小导航显示和跳转到某一页

HTML代码:

<div class="header">header</div>
<div class="doc">
	<div class="main">
		<div class="page page1">page1</div>
		<div class="page page2">page2</div>
		<div class="page page3">page3</div>
		<div class="page page4">page4</div>
	</div>
	<div class="page-nav"><i class="current"></i><i></i><i></i><i></i></div>
	<a href="javascript:void(0)" class="nextPage">下一页</a>
</div>
<div class="footer">footer</div>
<script src="http://js.3conline.com/min/temp/v1/lib-jquery1.10.2.js"></script>
<script src="http://js.3conline.com/pcbaby/2017/nianping/pc/jquery-mousewheel.js"></script>

CSS设置时,需要注意有两个父类元素,最外面的要设置超出高度隐藏。

.doc{height:640px;position:relative;overflow:hidden}
.main{position:relative}
.doc .page{position:absolute;height:100%;width:100%;top:100%}
.doc.done .page{position:static;top:0}

JS代码,要注意滚动的兼容代码用到了jQuery插件jquery-mousewheel,不要漏掉这个插件
JS:

$(function() {
    var onScroll = false,
    curIndex = 0,
    len = $(".doc .page").length;
    var winHeight = $(window).height();
    // var boxHeight = winHeight- 60 >640 ? winHeight - 60 : 640; //当需要显示所有内容,需要给外层一个固定高度,保证所有内容都能看到
    var boxHeight = winHeight - 60;
    var toPage = function(curIndex) {
        onScroll = true;
        var now = -curIndex * boxHeight;
        $(".page").eq(curIndex).addClass("current").siblings(".page").removeClass("current");
        $(".page-nav i").eq(curIndex).addClass("current").siblings("i").removeClass("current");
        $(".main").animate({
            top: now + "px"
        },1000,function() {
            onScroll = false;
        });
    };
    $(".doc").css("height", boxHeight);
    $(".main").css("height", boxHeight * len);
    $(".page").css("height", boxHeight);
    $(".doc").addClass("done");
    var pageNext = function() {
        if (curIndex == len - 1) return;
        curIndex++;
        toPage(curIndex);
    }
    var pagePrev = function() {
        if (curIndex == 0) return;
        curIndex--;
        toPage(curIndex);
    }
    $(".doc").on("mousewheel",function(e, i) {
        if (onScroll) return;
        if (i < -.2) {
            //向下滚动
            pageNext();
        } else {
            //向上滚动
            pagePrev();
        }
    });
    $('.nextPage').on('click',function() {
        if (onScroll) return;
        pageNext();
    }); 
    $('.page-nav i').on('click',function() {
        if (onScroll) return;
        var index = $(this).index();
        toPage(index);
    })
});

演示:全屏效果

好久没认真写文章了,关注我的童鞋应该有所了解,我最近在经营知识星球,但付费人数很少,没多少人愿意付费,所以我后面会逐渐回归写文章了,分享文章不会太积极了。有得必有失吧。

原创文章:jQuery实现类似fullpage插件的全屏滚动效果 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/fullpage.html)