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

bendan520 2023年8月26日 jquery 0

已经很久没有使用fullpage插件来实现全屏滚动了。我整理了一个比较简单的PC版全屏滚动代码。我在做专题的时候写了一段很复杂的代码，心里很得意。后来看了网上的一种写法，发现我的写法很复杂。我之前的版本是在控制前一屏和后一屏的同时改变样式。但显然这些滚动效果应该交给父元素，这样你只需要控制父元素向下或向上即可。无需担心上一屏幕和下一屏幕。结合网上的想法和我之前做的代码，代码有以下功能： 1.头尾的内容可以滚动，不用滚动全屏 jquery，只要中间滚动就够了。 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，愿意付费的人也不多，所以我会慢慢回归到旁边写文章。分享文章不会太积极。有得也有失。

返回顶部