HTML5学堂-码匠 HTML5学堂

您当前位于:工具类文件推荐 ——> jQuery全屏滚动插件 fullPage.js

jQuery全屏滚动插件 fullPage.js

2015/04/28 17:31:37 | 作者:HTML5学堂(码匠) | 分类:工具类文件推荐 | 关键词:fullPage,单屏滚动,全屏滚动,滚动插件

jQuery全屏滚动插件fullPage.js

HTML5学堂:2014年,除了继续“扁平化”之外,网页设计的天平开始逐渐的向全屏类网站倾斜,运应而生的就是前端对全屏类网站的基本实现。基于jQuery的全屏类插件有不少,我们在使用过几个之后,发现fullpage.js相对使用较为方便。发出来与大家分享一下~

fullPage.js插件简介

fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便、很轻松的制作出全屏网站。

fullPage.js功能简介

  1. 支持鼠标滚动
  2. 支持前进后退和键盘控制
  3. 多个回调函数
  4. 支持手机、平板触摸事件
  5. 支持 CSS3 动画
  6. 支持窗口缩放
  7. 窗口缩放时自动调整
  8. 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

fullPage.js单屏滚动效果

HTML5 学堂 jQuery全屏滚动插件fullPage.js

fullPage.js使用步骤

首先引入必要文件:

  • reset.css
  • jquery.fullPage.css
  • jquery.fullPage.min.js
  • jquery-1.8.3.min.js
  • jquery-ui-1.10.3.min.js

文件下载地址:http://yunpan.cn/QCxWCXe7f52Yw (访问密码:73a1)

欢迎沟通交流~HTML5学堂

单屏滚动效果如下:

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>梦幻雪冰</title>
  5. <link rel="stylesheet" href="jquery.fullPage.css">
  6. <link rel="stylesheet" href="reset.css">
  7. <script src="jquery-1.8.3.min.js"></script>
  8. <script src="jquery-ui-1.10.3.min.js"></script>
  9. <script src="jquery.fullPage.min.js"></script>
  10. <style>
  11.     /*自定义导航栏*/
  12.     .nav {
  13.         position: fixed;
  14.         left: 10px;
  15.         top: 10px;
  16.     }
  17.     .nav a,
  18.     .nav li {
  19.         float: left;
  20.     }
  21.     .nav li {
  22.         margin-right: 5px;
  23.     }
  24.     .nav a {
  25.         padding: 10px 20px;
  26.         background: #fff;
  27.         color: #4BBFC3
  28.         text-decoration: none;
  29.     }
  30.     /*选中跳转栏目的效果*/
  31.     .nav .active a{
  32.         background: #333;
  33.     }
  34.     .section {
  35.         overflow: hidden;
  36.      color: #fff;
  37.         font: 50px "Microsoft Yahei";
  38.         text-align: center;
  39.     }
  40. </style>
  41. <script>
  42.     $(document).ready(function() {
  43.         $.fn.fullpage({
  44.             // 设置每一屏的背景颜色
  45.             'slidesColor': ['#999', '#4BBFC3', '#7BAABE', '#f90','#1bbc9b', '#4BBFC3', '#7BAABE','#f90'],
  46.             // 定义锚链接
  47.             'anchors': ['page1', 'page2', 'page3', 'page4','page5','page6','page7','page8'],
  48.             // 是否使用 CSS3 transforms 滚动,设置为true自定义导航栏才能显示
  49.             'css3': true,
  50.             // 绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动
  51.             'menu' : '.nav',
  52.             // 字体是否随着窗口缩放而缩放
  53.             'resize': true,
  54.             // 滚动速度,单位为毫秒,默认为700
  55.             'scrollingSpeed': 800
  56.         });
  57.     });
  58. </script>
  59. </head>
  60. <body>
  61.     <ul id='menu' class='nav'>
  62.         <li data-menuanchor="page1"><a href="#page1" class='active'>第1个项目</a></li>
  63.         <li data-menuanchor="page2"><a href="#page2">第2个项目</a></li>
  64.         <li data-menuanchor="page3"><a href="#page3">第3个项目</a></li>
  65.         <li data-menuanchor="page4"><a href="#page4">第4个项目</a></li>
  66.         <li data-menuanchor="page5"><a href="#page5">第5个项目</a></li>
  67.         <li data-menuanchor="page6"><a href="#page6">第6个项目</a></li>
  68.         <li data-menuanchor="page7"><a href="#page7">第7个项目</a></li>
  69.         <li data-menuanchor="page8"><a href="#page8">第8个项目</a></li>
  70.     </ul>
  71.     <div class="section">
  72.         <h3>第一屏</h3>
  73.         <p>fullPage.js — 【梦幻雪冰】基本演示</p>
  74.     </div>
  75.     <div class="section">
  76.         <div class="slide"><h3>第二屏的第一屏</h3></div>
  77.         <div class="slide"><h3>第二屏的第二屏</h3></div>
  78.         <div class="slide"><h3>第二屏的第三屏</h3></div>
  79.     </div>
  80.     <div class="section">
  81.         <h3>第三屏</h3>
  82.     </div>
  83.     <div class="section">
  84.         <h3>第四屏</h3>
  85.     </div>
  86.     <div class="section">
  87.         <h3>第五屏</h3>
  88.     </div>
  89.     <div class="section">
  90.         <h3>第六屏</h3>
  91.     </div>
  92.     <div class="section">
  93.         <h3>第七屏</h3>
  94.     </div>
  95.     <div class="section">
  96.         <h3>第八屏</h3>
  97.         <p>这是最后一屏:【梦幻雪冰】</p>
  98.     </div>
  99. </body>
  100. </html>

!注意

  1. 【1】结构中的div的类名为“section”,因为 jquery.fullPage.css样式已经为大家写好了
  2. 【2】JavaScript代码要写在head里面,不然会出现文本内容不能居中和滚动效果出现问题
  3. 【3】为了实现字体随着窗口缩放而缩放,字体大小中属性值的单位不要用px而是用em
  4. 【4】设置导航栏,要定义导航栏的id或者是类名,绑定到menu属性里面(#menu或者.menu),用data-menuanchor设置选中要跳转的栏目或者用data-index(设置active类名)
  5. 【5】为了防止在滚动栏目底部显示下一个栏目的问题,可以在.section类选择器里面添加一句overflow:hidden;就可以解决该问题了。

fullPage.js API

文档

HTML5 学堂 jQuery全屏滚动插件fullPage.js

方法

HTML5 学堂 jQuery全屏滚动插件fullPage.js

回调函数

HTML5 学堂 jQuery全屏滚动插件fullPage.js

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端