如何使用fullpage.js实现锤子手机的首屏和尾屏的效果？

发布于 2022-09-03 19:12:12 字数 444 浏览 35 评论 0

fullpage.js是一个很好的一页式幻灯片效果插件，但是默认只有一屏一屏的滚动功能。我想知道如何能够使用它实现类似锤子手机页面的首屏和尾屏的效果呢？
1. 首屏有头部，滚动鼠标才切换到第一屏，头部隐藏；
2. 尾屏有个附加信息的底部，在最后一屏滚动鼠标，底部才显示出来。
演示效果：http://www.smartisan.com/#/overview

图片描述

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

彡翼 2022-09-10 19:12:12

前两天刚好也做了一个类似的页面,这种第一屏和最后一屏的部分滚动通过把滚动的距离改成navbar或者footer的高度就可以实现,但是fullpage好像没有单独的设置来修改每一次滚动的距离,所以你可能要稍微改一下他的js.判断是否第一/最后一屏,然后算一下高度就OK.

回复收藏 0

素年丶 2022-09-10 19:12:12

这个简单撒，直接CLASS加个属性就OK了他插件自带的属性比如你的尾页友情链接是这个
<div class="section fp-auto-height"> 加一个这个CLASS就行了：fp-auto-height 亲测有用

回复收藏 0

分開簡單 2022-09-10 19:12:12

能看下你们改好的成品吗？

回复收藏 0

忆沫 2022-09-10 19:12:12

修改一下滚动相关代码，判断当前页面应该就好了，参考：http://www.gbtags.com/gb/gbliblist/84.htm

回复收藏 0

治碍 2022-09-10 19:12:12

问题解决了吗
正好也遇到了

回复收藏 0

掌心的温暖 2022-09-10 19:12:12

解决了的给个答案把。。在线等，挺急的

回复收藏 0

污味仙女 2022-09-10 19:12:12

参考这个实现方式http://jsfiddle.net/reddy887/o4uywjrn/

回复收藏 0

金兰素衣 2022-09-10 19:12:12

如果给底部加通底<div class="section fp-auto-height"></div>亲测有效！

回复收藏 0

夜未央樱花落 2022-09-10 19:12:12

找了大半天，终于找到原因了，是因为你值引用了js，但是没有引用css；你在网上随便找一个教程，都有说引入jquery.fullPage.css的，比如：链接描述，so，步骤如下：
第一步：在页面要引入jquery.fullPage.css、jquery.fullPage.js
第二部：给需要添加自动高度的元素添加 fp-auto-height，就可以了【注意，这里常用的地方是导航和底部，那就得把头部和底部放到你切换元素的里面，请看图吧】
图片描述

回复收藏 0

誰ツ都不明白 2022-09-10 19:12:12

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/vendors/jquery.easings.min.js"></script>
    <style>
        
    </style>
    <title></title>
</head>
<body>

    <div id="fullpage">
        <header class="section header"><h1>这是第一屏</h1></header>
        <div class="section"><h1>这是第2屏</h1></div>
        <div class="section"><h1>这是第3屏</h1></div>
        <div class="section"><h1>这是第4屏</h1></div>
        <div class="section section5"><h1>这是第5屏</h1></div>
    </div>
    <script>
        $(document).ready(function(){
            $('#fullpage').fullpage();
            
            $('.header').css({'height':'200px'})
            $('.section5').css({'height':'200px'})
            
        })
        
        
    </script>
</body>

</html>

回复收藏 0

~没有更多了~