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

用法：

1、引入jquery

2、引入fullPage

3、每个section代表一屏

4、js启动：

$(function(){

    $('#dowebok').fullpage();

});

完整实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="js/jquery-1.8.3.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.2/jquery.fullPage.js"></script>

</head>

<body>

    <div id="fullpage">

        <div class="section">Some section one</div>

        <div class="section active">Some section two</div>

        <div class="section">Some section three</div>

        <div class="section">Some section four</div>

    </div>

    <script>

    $(document).ready(function() {

        $('#fullpage').fullpage({

            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']

        });

    });

    </script>

</body>

</html>

详情：

https://github.com/alvarotrigo/fullPage.js

http://www.dowebok.com/77.html

fullPage全屏滚动的实现的更多相关文章

  1. 手机端实现fullPage——全屏滚动效果

    封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1.  纯js实现,小巧轻便. 2.  兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1.  仅封装了基础功能,H ...

  2. jquery.fullpage 全屏滚动

    参考文档 :http://www.dowebok.com/77.html 下载地址: https://github.com/alvarotrigo/fullPage.js 1. 使用 HTML < ...

  3. fullPage 全屏滚动【上下滚动】效果

    由于个人能力,研究了两天,终于写出来了. 又花了一天的时间成功的将30多行脚本,改成了70多行,我也是够有心的了. 那么接下来就是我制作这个效果的全部过程. 那一年我十七,她十八,在那个夏天里,我们, ...

  4. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  5. FullPage.js – 轻松实现全屏滚动（单页网站）效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

  6. jquery.fullPage.js全屏滚动插件教程演示

    css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...

  7. jQuery+fullPage.js演示10种全屏滚动

    基本演示 背景演示 循环演示 回调函数演示 绑定菜单演示 项目导航演示 自动滚动 slide自动滚动 响应式 下载地址 实例代码 <!DOCTYPE html> <html lang ...

  8. jQuery fullPage.js 全屏滚动

    fullPage 是一款不依赖任何 js 库的全屏滚动组件,支持垂直/水平滚动.CSS3 旋转/缩放动画,支持 IE5.5+,支持移动设备. 在线实例 垂直滚动 水平滚动 CSS3 动画1 CSS3 ...

  9. 《fullPage.js》创建全屏滚动的网站

    插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...

随机推荐

  1. bzoj3779: 重组病毒 link-cut-tree

    题目传送门 这道题看了做了个神转换.....推荐个博客给各位大爷看看吧神犇传送门 代码敲了半天....题目也读了半天 线段树维护的东西很容易和lct混在一起 调了调能过也是很开心啊 运气比较好吧233 ...

  2. 文本区 JTextArea 的使用

    文本区JTextArea是对多行文本进行编辑的组件,用空字符来控制文本的格式.eg:"\n"为换行,"\t"为插入一个Tab字符. 文本去JTextArea的常 ...

  3. 服务器应用程序不可用，由于无法创建应用程序域，因此未能执行请求。错误: 0x80070002 系统找不到指定的文件。

    使用360更新网站补丁导致.net2.0环境报错问题现象:服务器应用程序不可用查看日志:出现由于无法创建应用程序域,因此未能执行请求.错误: 0x80070002 系统找不到指定的文件. 搜索定位:罪 ...

  4. CentOS 7 主机加固手册-下

      CentOS 7 主机加固手册-上 CentOS 7 主机加固手册-中 CentOS 7 主机加固手册-下 0x1f 删除禁用非必要的服务 删除非必要的服务 # Remove yum remove ...

  5. 破解wifi时遇到rtl8187 - [phy1]SIOCSIFFLAGS: Name not unique on network

    当我使用我的ubuntu利用aircrack-ng套件进行wifi破解时 遇到如下问题 rtl8187 - [phy1]SIOCSIFFLAGS: Name not unique on network ...

  6. Linux 开机自动挂载windows分区

    blkid 查看 uuid如下ps:或者使用uuidgen <设备>查看具体设备的uuidreddusty@reddusty-X550JK:~$ sudo blkid[sudo] pass ...

  7. python2.7字典转换成json时中文字符串变成unicode的问题：

    参考:http://blog.csdn.net/u014431852/article/details/53058951 编码问题: python2.7字典转换成json时中文字符串变成unicode的 ...

  8. kuangbin带你飞 匹配问题 二分匹配 + 二分图多重匹配 + 二分图最大权匹配 + 一般图匹配带花树

    二分匹配:二分图的一些性质 二分图又称作二部图,是图论中的一种特殊模型. 设G=(V,E)是一个无向图,如果顶点V可分割为两个互不相交的子集(A,B),并且图中的每条边(i,j)所关联的两个顶点i和j ...

  9. cookie和session的区别与会话跟踪技术

    会话跟踪技术: HTTP是一种无状态协议,每当用户发出请求时,服务器就会做出响应,客户端与服务器之间的联系是离散的.非连续的.当用户在同一网站的多个页面之间转换时,根本无法确定是否是同一个客户,会话跟 ...

  10. xdebug参数说明

    ;;;;;;;;;;;;;;;;;;;;;;;;; Basic Features; xdebug基本功能,如堆栈跟踪,递归错误安全输出,时间内存跟踪等;;;;;;;;;;;;;;;;;;;;;;;;; ...