jQuery fullpage响应式全屏滚动

所属分类:UI,媒体-布局,滚动,幻灯片和轮播图

 38912  446  查看评论 (33)
分享到微信朋友圈
X
jQuery fullpage响应式全屏滚动 ie兼容10

全屏滚动流媒体,引入,

<link rel="stylesheet" href="css/jquery.fullPage.css" />
<script src="js/jquery.fullPage.min.js"></script>

在执行$('#index_main').fullpage({

'navigation': true,
slidesNavigation: true,
    controlArrows: false,
    continuousHorizontal: true,
    scrollingSpeed: 1000,
    showActiveTooltip: true,
    anchors: ['hero', 'one', 'two', 'three'],
    loopHorizontal: true,
    afterLoad: function(anchorLink, index) {
        if (index == 1) {
            $('header').removeClass('on');
        }
        if (index == 2) {
            $('header').addClass('on');
            $('.section2 h3').addClass('animated fadeInUp').css('animation-delay', '.1s');
        }
        if (index == 3) {
            $('header').addClass('on');
            $('.section3 h3').addClass('animated fadeInUp').css('animation-delay', '.1s');
        }
        if (index == 4) {
            $('header').addClass('on');
            $('.section4 h3').addClass('animated fadeInUp').css('animation-delay', '.1s');
        }
    },
    onLeave: function(index, direction) {
    }
})
相关插件-布局,滚动,幻灯片和轮播图

jQuery bootstrap响应式食品网站模板

jQuery bootstrap响应式食品网站模板,提供7款不同首页风格
  布局
 8700  147

jquery异步加载图片大图小图

jquery异步加载大图小图
  布局
 22221  278

jQuery Bootstrap个人简网站模板

jQuery Bootstrap个性化、黑色风格响应式个人简历模板
  布局
 20108  287

VR游戏开发公司网站响应式模板

游戏开发公司网站响应式模板
  布局
 24657  310

讨论这个项目(33)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?尔 0
    2020/9/12 17:37:49
    您好,使用“fullpage”怎么让最后一屏变成正常页面(就是没有导航,就像正常的响应式页面一样,就一直是往下写的) 回复
    Ervin 0
    2020/5/8 14:16:55
    请问锚点设置里为什么在html文本里没有看见对应的内容? 回复
    壹起航-建站部设计 0
    2020/3/28 11:10:53
    有没有大佬在?这个插件,如果我添加个底部,不在section里面,怎么设置最后一个滚动后,再滚动到底部? 回复
    壹起航-建站部设计 0
    2020/3/26 18:09:03
    这个不错,手机端也能正常~ 回复
    斜阳下45”微笑 0
    2019/9/9 13:49:30
    IE浏览器不兼容吗
        恬恬~0
        2019/9/18 17:04:30
        当时没测
    回复
    *动感超人爱泡面!* 0
    2019/8/26 23:39:05
    后面几页的class是section section2、3、4,这些css样式在哪里,没有找到,我在后几页的div里面添加东西都自带一个居中,我还看到有一个margin:0,-170,0,0.没搞清楚是哪里改这个其它页div的居中
        恬恬~1
        2019/9/4 10:02:43
        class为section2、section3、section4的样式都在index.css里面,新增东西居中了是因为样式里设置了text-align:center
    回复
    安之若素 0
    2019/7/26 14:07:35
    大神如何判断在下拉的那一刻隐藏导航栏
        西瓜0
        2019/7/26 14:40:00
        不太明白你的意思,是向下滚动一屏吗?
    回复
    陈先森 0
    2019/7/26 11:36:50
    请问背景图怎么改成图片由小变大呢?(现在是由大变小的)
        西瓜1
        2019/7/26 14:37:46

        index.css中修改

        /*banner背景图片动画*/
            @-webkit-keyframes scale-bg{
            from{
                -webkit-transform:scale(1.2);
                transform:scale(1.2);
            }
            to{
                -webkit-transform:scale(1);
                transform:scale(1);
            }
            }
            @keyframes scale-bg{
            from{
                -webkit-transform:scale(1.2);
                transform:scale(1.2);
            }
            to{
                -webkit-transform:scale(1);
                transform:scale(1);
            }
        }

        改为

        /*banner背景图片动画*/
        @-webkit-keyframes scale-bg{
            from{
                -webkit-transform:scale(1);
                transform:scale(1);
            }
            to{
                -webkit-transform:scale(1.2);
                transform:scale(1.2);
            }
            }
            @keyframes scale-bg{
                from{
                -webkit-transform:scale(1);
                transform:scale(1);
            }
            to{
                -webkit-transform:scale(1.2);
                transform:scale(1.2);
            }
        }
    回复
    人生若只如初见 0
    2019/7/19 11:54:40
    向上滑就没效果了 回复
    瓜皮的节操 0
    2019/7/15 10:04:53
    你好,我想在页面做一个点击选中某个元素然后就会向下一屏滚动,找不到在哪改,能帮忙解答一下吗
        ldwsm0
        2019/7/15 10:11:22
        网页使用的是锚点定位方式滚动的,滚动下屏非常简单,例如。第二屏中,你要点击第二页跳到第三页,只需要加入<h3><a href="#two">第二页</a></h3>
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复