jQuery fullpage响应式全屏滚动

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

 55649  602  查看评论 (38)
分享到微信朋友圈
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) {
    }
})
相关插件-布局,滚动,幻灯片和轮播图

电商服装网站模板

电商服装网站响应式模板
  布局
 38440  540

jQuery无限滚动加载图片瀑布流代码

jQuery无限滚动瀑布流式显示
  布局
 39444  368

jQuery bootstrap响应式网站模板

非常实用的jQuery bootstrap响应式网站模板,代码少,无多余功能全是实用的模块,可定制性强。
  布局
 21394  304

分享一个 Bootstrap3 响应式的单页小站

Bootstrap3 响应式的单页小站
  布局
 40624  512

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

    mlt122911 0
    2024/8/12 11:53:10
    学习一下,没看明白怎么弄响应式 回复
    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
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复