jQuery fullpage响应式全屏滚动

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

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

更新时间:2020-12-16 20:51:59

更新说明:去除logo,避免不必要的麻烦。


发布时间:2014-12-29 14:27:17

全屏滚动流媒体,引入,

<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) {
    }
})
相关插件-布局,滚动,幻灯片和轮播图

大巨幕响应式单页模板

基于bootstrap响应式单页网站模板
  布局
 48133  701

bootstrap后台模版hAdmin

hAdmin是一个免费的后台管理模版,该模版基于bootstrap与jQuery制作,集成了众多常用插件,基本满足日常后台需要,修改时可根据自身需求,来定制后台模版。
  布局
 199773  1598

bootstrap登录表单模板

注册页面,带空值验证
  布局
 108407  483

HTML5九宫格布局的网格菜单

九宫格布局展示效果
  布局
 40139  453

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

    S???????????s? 0
    2022/5/30 17:37:02
    ?? ??? ?? 0
    2021/8/11 16:36:09
    厉害 这个效果很好 回复
    欧阳白 0
    2020/11/3 10:27:40
    我想在首页复制两份 banner 轮播 复制了第二份 图片啥的都不显示,iD名字也改了还是不行 作者留个联系方式呗 求助 回复
    ?尔 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
        不太明白你的意思,是向下滚动一屏吗?
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复