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

用法：

1、引入jquery

2、引入fullPage

3、每个section代表一屏

4、js启动：

  1. $(function(){
  2.     $('#dowebok').fullpage();
  3. });

完整实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <script src="js/jquery-1.8.3.min.js"></script>
  8.     <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.2/jquery.fullPage.js"></script>
  9. </head>
  10.  
  11. <body>
  12.     <div id="fullpage">
  13.         <div class="section">Some section one</div>
  14.         <div class="section active">Some section two</div>
  15.         <div class="section">Some section three</div>
  16.         <div class="section">Some section four</div>
  17.     </div>
  18.     <script>
  19.     $(document).ready(function() {
  20.         $('#fullpage').fullpage({
  21.             sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
  22.         });
  23.     });
  24.     </script>
  25. </body>
  26.  
  27. </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. 2017年上海金马五校程序设计竞赛：Problem K : Treasure Map （蛇形填数）

    Description There is a robot, its task is to bury treasures in order on a N × M grids map, and each ...

  2. BigDecimal常用操作

    import java.math.BigDecimal; public class BigDecimalUtil { /** * 由于Java的简单类型不能够精确的对浮点数进行运算,这个工具类提供精 ...

  3. CentOS6.x 安装升级Python2.7.x Python3.4.x

    CentOS6.x 安装升级Python2.7.x Python3.4.x 2015-06-07• CentOS.Linux • 评论关闭 CentOS release 6.6 (Final) 安装升 ...

  4. KDJ回测

    # -*- coding: utf-8 -*- import os import pandas as pd # ========== 遍历数据文件夹中所有股票文件的文件名,得到股票代码列表stock_ ...

  5. Python shell 控制台，有个快捷键可以向dos那样通过上下键来选择之前输入的内容?

    Alt + p 往前: Alt+n 从头开始历史输入

  6. PHP程序员的简单运维

    所谓的简单运维就是保证自己开发的程序能正常运行和使用. 当一个程序员需要兼作运维时候需要掌握以下技能 1.linux系统基础命令和Windows Server操作 是基础中的基础,ls, rm, to ...

  7. （七）MySQL数据操作DQL:多表查询2

    (1)准备环境 1)创建员工表 mysql> create table company.employee6( -> emp_id int auto_increment primary ke ...

  8. 【cocos2d-js官方文档】七、CCFileUtils

    Web引擎 CCFileUtils.js在Web引擎中已经被删除了,原因是FileUtils在原生平台中的文件检索功能在Web端是无法实现的. 二进制文件获取的方法被转移到了cc.loader.loa ...

  9. C、C++ static 的作用

    1.隐藏 当同时编译多个文件时,所有未加static关键字的全局变量和函数都具有全局可见性. 例如:同时编译两个源文件 //ghz.c #include <stdio.h> char a ...

  10. HDU 1811 Rank of Tetris 【拓扑排序 + 并查集】

    自从Lele开发了Rating系统,他的Tetris事业更是如虎添翼,不久他遍把这个游戏推向了全球. 为了更好的符合那些爱好者的喜好,Lele又想了一个新点子:他将制作一个全球Tetris高手排行榜, ...