全屏网页插件fullpage

<link rel="stylesheet" type="text/css" href="/plugins/fullpage/jquery.fullPage.css" />
<link href="http://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/fullpage/jquery.fullPage.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("#fullpage").fullpage({
      // 导航区域
      // 绑定菜单盒子 ( #menu)
      'menu': '#menu',
      // 是否锁定锚, 锁定后点击菜单不会跳转到对应的屏 (false)
      'lockAnchors':false, 
      // url锚参数 用户区分当前是哪一屏 (['firstPage','secondPage'])
      'anchors':["firstPage", "secPage", "thrPage", "fourPage", "fivePage"],
      // 是否开启导航点 (false)
      'navigation':true, 
      // 导航点位置 (right) left,right
      'navigationPosition':'left',
      // 开启导航点后  鼠标放在小圆点上的提示 (['firstSlide','secondSlide'])
      'navigationTooltips':['首页 ',' 数据监测','规划报告','新闻中心','关于我们'],
      // 是否直接显示导航点提示 (false)
      'showActiveTooltip':false,
      // 开启Slide导航点(false)
      'slidesNavigation':true,
      // Slide导航点位置(bottom)
      'slidesNavPosition':'top',
                    
      // Scrolling 动画 
                    
      // 每个屏幕滚动动画执行的时间,时间的单位为毫秒(ms)
      'scrollingSpeed':1000,
      // 定义屏幕是否自动滚动  (true)
      'autoScrolling':true,
      // 默认值:true,设置是否自适应整个窗口的空间,以某个section的内容为分界线,
      //设置为true时,某个的section将填充到整个页面,否者用户可以停留在网页的任何位置。
      'fitToSection':true,
      'fitToSectionDelay':1000,
      // 是否使用浏览器默认的滚动条, 开启后autoScrolling配置任然生效,关闭后wow.js无效
      'scrollBar':false,
      // 定义了用于垂直和水平滚动的过渡效果
      'easying':'easeInOutElastic',
      // 定义是否使用Js或css3,让section和slide使用动画
      'css3':true,
      // 要定义此效果,css3属性必须为true
      // 你可以使用 CSS3 transition-timing-function 属性 自定义多个动画效果,        
      // 例如:linear、ease-out、
      // 或者使用cubic-bezier方法创建自定义的动画效果,
      'easingcss3':'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
      // 默认值:false,定义屏幕滚动到第一个后,是否循序滚动到最后一个。
      'loopTop':false,
      // 默认值:false,定义屏幕滚动到最后一个后,是否循环滚动到第一个。
      'loopBottom':false,
      // 默认值:false,定义向下滚动到最后一节是否应该向下滚动到第一个,
      // 如果向上滚动的第一部分应该滚动到最后一个
      // loopToop、loopBottom相比 会直接滑动到第一个或最后一个
      // 不兼容loopTop和loopBottom选项, 
      // 任何滚动条存在于网站(scrollBar:true或autoScrolling:false)。
      'continuousVertical':false,
      // 默认值:true,定义水平的幻灯片是否循环切换。
      'loopHorizontal':true,
      // 默认null,避免在滚动某些元素时滚动屏幕, 如百度地图放大会向上滑,将地图容器ID设置进来
      //'normalScrollElements':['#map'],
                    
      // fullpage扩展:定义在最后一个幻灯片中向右滑动应该向右滑动到第一个还是不向左滑动,
      // 如果在第一个幻灯片中向左滚动,应该向左滑动到最后一个幻灯片。
      // 不兼容loopHorizontal。需要fullpage.js> = 2.8.3。
      //'continuousHorizontal':false,
      // fullpage扩展:默认false,定义是否使用鼠标滚轮或触控板在滑块内水平滑动。
      //'scrollHorizontally':false,
      // fullpage扩展:默认false,移动一个水平滑块是否会迫使其他部分中的滑块在相同方向上滑动。
      //'interlockedSlides':false,
      // fullpage扩展:默认false,启用或禁用使用鼠标或手指拖动和滑动部分和幻灯片, 
      // 可选项: true, false, fingersonly
      //'dragAndMove':false,
      // fullpage扩展:默认false,提供使用百分比非全屏部分的方法
      //'offsetSections':false,
      // fullpage扩展:默认false,是否在离开其滑块后重置每个滑块
      //'resetSliders':false,
      // fullpage扩展:默认false,定义是否使用淡入淡出效果,而不是默认滚动效果。
      // 可选项: true, false, sections,slides
      //'fadingEffect':false,
      // 是否为节/幻灯片创建滚动,以防其内容大于其高度  插件scrolloverflow.min.js
      //'scrollOverflow':false,
      // 默认值:true,定义是否可以使用键盘导航内容。
                    
      ////辅助功能 
      'keyboardScrolling':true,
      // 默认值:true,访问网站网址 是直接跳转到指定屏还是从第一屏滚动到指定屏
      'animateAnchor':true,
      // 默认值:true,是否将站点的状态推送到浏览器的历史记录
      'recordHistory':true,
                    
      ////设计 
      // 默认值:true,确定是否使用控制箭头使幻灯片向右或向左移动。
      'controlArrows':true,
      // 默认值:true,垂直居中sections中的内容。
      // 请考虑在afterRender回调中使用委派或加载其他脚本。
      'verticalCentered':true,
      // 默认值:none,定义每个section的CSS背景演示
      'sectionsColor':["#294b77", "#ffffff", "#3e8ebd", "#ffffff", "#ffffff"],
      // 默认值:0,定义每个sections的上内边距
      'paddingTop':'100px', 
      // 默认值:0, 定义每个sections的下内边距
      'paddingBottom':'100px',
      // 默认值:null,定义哪些元素将从插件的滚动结构中移除,这在使用css3选项保持固定时是必需的
      'fixedElements':'.removeS',
      // 默认值:0,当浏览器的宽度小于定义值时,网页将像正常网页一样滚动,不会一屏一屏的滚动。
      'responsiveWidth':0,
      // 默认值:0,浏览器高度小于定义值时 ,网页将像正常网页一样滚动,不会一屏一屏的滚动。
      'responsiveHeight':300,
                    
      // 自定义选择器
      // 默认值:.section,定义用于插件section的jQuery选择器
      'sectionSelector':'.section',
      // 默认值:.slide, 定义用于插件slide的jQuery选择器
      'slideSelector':'.slide',
                    
      // 默认值:.true, 是否启动延迟加载 ,使用路径为 data-src=''
      'lazyLoading':true,
                    
      // events 事件
      // 用户在离开Section时, 在转到新section时触发此回调, 返回false将取消移动
      // index: 离开section的索引, 从1开始
      // nextIndex: 目标section的索引, 从1开始
      // direction: section的滚动方向, up或down
      onLeave: function(index, nextIndex, direction){
        console.log("当前事件为:onLeave!");
        console.log('离开第'+index+"个页面, 滑动到第"+nextIndex+"个页面, 
          当前移动方向:"+direction);
          //return false;
        },
      // 在滚动结束后,section一旦被加载,回调触发
      // anchorLink: 对应section的anchorLink
      // index: section的索引, 从1开始
      afterLoad:function(anchorLink, index){
        console.log("当前事件为:afterLoad!");
        console.log('当前section是第'+index+'个页面, 它的anchorLink为: '+anchorLink);
      },
      // 这个回调是在页面结构生成之后触发,这是要用来初始化其他插件
      afterRender: function(){
        console.log("当前事件为:afterRender!");
        console.log("页面结构已生成!!!");
      },
      // 在调整浏览器窗口大小后被触发
      afterResize: function(){
        var pluginContainer = $(this);
        console.log("当前事件为:afterResize!");
        console.log('部分已经调整大小');
      },
      // fullpage.js从正常模式更改为响应模式或从响应模式更改为正常模式后触发。
      // isResponsive:boolean 确定是进入响应模式(true),还是返回正常模式(false)
      afterResponsive: function(isResponsive){
        console.log("当前事件为:afterResponsive!");
        console.log('isResponsive:'+isResponsive);
      },
      // 在滚动结束后,加载了section的slide后,回调触发
      // anchorLink: 对应section的anchorLink
      // index:section的索引, 从1开始
      // slideAnchor:对应slide的anchor(锚点)
      // slideIndex:slide的索引, 从1开始(默认slide不计数)
       afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
          console.log("当前事件为:afterSlideLoad!");
          console.log('当前是第'+index+'个section, 它的anchor是'+anchorLink+'
          .当前slide是第'+slideIndex+'个,它的anchor是'+slideAnchor);
       },
      // 当用户在离开slide前往转到另一个slide时,会触发此回调。返回false将在它发生之前取消移动。
      // anchorLink:section对应的anchorLink
      // index:section的索引, 从1开始
      // slideIndex:slide的索引, 从0开始
      // direction:slide的滚动方向, right or left
      // nextSlideIndex: 目标slide的索引
      onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
        console.log("当前事件为:onSlideLeave!");
        console.log('当前是第'+index+'个section, 它的anchor是'+anchorLink+'
          .当前slide是第'+slideIndex+'个,它本次向'+direction+' 移动, 
          目标是第'+nextSlideIndex+'个');
        }
      };
                
      // 效果查看地址 http://alvarotrigo.com/fullPage/examples/methods.html#3rdPage
      // 向上滚动一个section
      $.fn.fullpage.moveSectionUp();
      // 向下滚动一个section
      $.fn.fullpage.moveSectionDown();
      // 将页面滑动到指定section, 并滑动到第2个slide
      $.fn.fullpage.moveTo('firstSlide', 2);
      $.fn.fullpage.moveTo(3, 0);
      $.fn.fullpage.moveTo(3);
      // 和moveTo相同, 直接跳转到目标 没有动画
      $.fn.fullpage.silentMoveTo('firstSlide', 2);
      // 将当前slide向右滚动到下一张slide
      $.fn.fullpage.moveSlideRight();
      // 将当前slide向左滚动到上一张slide
      $.fn.fullpage.moveSlideLeft();
      // 设置页面滚动方式, true为自动滚动,false手动正常滚动
      $.fn.fullpage.setAutoScrolling(false);
      // 设置section是否在屏幕中间
      $.fn.fullpage.setFitToSection(false);
      // 设置定位url中的锚是否可以控制页面滚动
      $.fn.fullpage.setLockAnchors(false);
                
      // 禁止滚动
      $.fn.fullpage.setAllowScrolling(false);
      // 禁止向下滚动  all,up,down,left,right
      $.fn.fullpage.setAllowScrolling(false, 'down');
      // 禁用向下和向右
      $.fn.fullpage.setAllowScrolling(false, 'down, right');
                
      // 禁用所有键盘滚动
      $.fn.fullpage.setKeyboardScrolling(false);
      // 禁用键盘向下滚动 all,up,down,left,right
      $.fn.fullpage.setKeyboardScrolling(false, 'down');
      // 禁用键盘向下和向右
      $.fn.fullpage.setKeyboardScrolling(false, 'down, right');
                
      // 是否为URL中的每个哈希更改历史记录
      $.fn.fullpage.setRecordHistory(false);
      // 定义滚动速度(以毫秒为单位)
      $.fn.fullpage.setScrollingSpeed(700);
                
      // 销毁由fullPage.js创建的所有JavaScript事件(滚动,URL中的hashchange ...)
      $.fn.fullpage.destroy();
      // 销毁所有fullPage事件以及原始HTML标记所做的任何修改。
      $.fn.fullpage.destroy('all');
      // 更新DOM结构以适应新窗口大小或其内容
      $.fn.fullpage.reBuild();
      // 设置页面的响应模式, 
      $.fn.fullpage.setResponsive(true);
    });
  </script>
  <style>
    #menu {
      position: fixed;
      top: 0;
      left: 0;
      height: 40px;
      z-index: 70;
      width: 100%;
      padding: 0;
      margin: 0;
     }
  </style>
  </head>
<body>
    <!-- 导航 -->
    <div id="menu">
        <a href="#firstPage">首页</a>
        <a href="#secPage">数据监测</a>
        <a href="#thrPage">规划报告</a>
        <a href="#fourPage">新闻中心</a>
        <a href="#fivePage">关于我们</a>
    </div>
    <div class="swapper-box">
        <div id="fullpage">
            <div class="section">
                <div class="slide">
                    ![](plugins/skitter/images/sprite-square.png)
                </div>
                <div class="slide">
                    ![](plugins/skitter/images/sprite-default.png)
                </div>
                <div class="slide">
                    ![](plugins/skitter/images/sprite-round.png)
                </div>
            </div>
            <div class="section">
                2
            </div>
            <div class="section">
                3
            </div>
            <div class="section">
                4
            </div>
            <div class="section">
                5
            </div>
            <div class="section removeS" style="background-color: #CC3333;">
                666666
            </div>
        </div>

    </div>
</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容