jQuery fullpage响应式全屏滚动

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

 38911  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 ui 仿windows 桌面

jquery ui 仿windows 桌面
  布局
 44285  453

jQuery bootstrap设计公司模板

jQuery bootstrap响应式设计公司模板
  布局
 19908  303

仿云后台管理界面模板

仿云后台管理界面模板html源码
  布局
 63779  654

响应式aap宣传网模板

响应式网站布局模板
  布局
 31722  476

讨论这个项目(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>
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复