文章转载自dowebok http://www.dowebok.com/

原文链接:http://www.dowebok.com/77.html

简介

如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。

fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:

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

兼容性

jQuery 兼容

兼容 jQuery 1.7+。

浏览器兼容

使用方法

1、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script> <!-- jquery.easings.min.js 用于 easing 参数,也可以使用完整的 jQuery UI 代替,如果不需要设置 easing 参数,可去掉改文件 -->
<script src="js/jquery.easings.min.js"></script> <!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 -->
<script src="js/jquery.slimscroll.min.js"></script> <script src="js/jquery.fullPage.js"></script>

2、HTML

<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>

每个 section 代表一屏,默认显示“第一屏”,如果要指定加载页面时显示的“屏幕”,可以在对应的 section 加上 class=”active”,如:

<div class="section active">第三屏</div>

同时,可以在 section 内加入 slide,如:

<div id="dowebok">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

3、JavaScript

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

演示:http://www.dowebok.com/demo/2014/77/

下载:http://dowebok.ctfile.com/file/83301805

 

【转载】jQuery全屏滚动插件fullPage.js的更多相关文章

  1. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  2. 学习 | jQuery全屏滚动插件FullPage.js

    简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...

  3. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

  4. jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)

    1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...

  5. 仿小米网jQuery全屏滚动插件fullPage.js

    演 示 下 载   简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...

  6. jQuery 全屏滚动插件 fullPage.js 参数说明

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...

  7. jQuery全屏滚动插件fullPage.js

    github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link ...

  8. jQuery全屏滚动插件fullPage使用

    1. 引入jquery.js和jquery.fullPage.min.js <script src="jquery.min.js"></script> &l ...

  9. 制作手机相册 全屏滚动插件fullpage.js

    今天是端午自己做了一个小的送祝福链接  这里用到了fullpage插件 $('#container').fullpage({ navigation: false,        //navigatio ...

随机推荐

  1. 团队作业8——第七天(beta阶段)

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 学号 成员 贡献比 201421123001 廖婷婷 16% 201421123002 翁珊 17% 201421123004 ...

  2. 团队作业8——第二次项目冲刺(Beta阶段)博客汇总

    一.冲刺计划安排 http://www.cnblogs.com/teamworkers/p/6875742.html 二.七天冲刺汇总 http://www.cnblogs.com/teamworke ...

  3. Java-反射机制学习

    反射机制是Java的一个重要性,它使得Java语言具有了动态特性.比如说,可以在代码中动态地获取某个类的信息,生成它的实例.获取其成员变量.调用它的方法.下面通过几个示例来演示反射机制的作用与用法. ...

  4. 201521123062《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中fin ...

  5. 201521123026《JAVA程序设计》第11周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 1.多线程同步:限制某个资源在同一时刻只能被一个线程访问.. 2.同步代码块:`synchronized(lock ...

  6. python函数式编程,列表生成式

    1.python 中常见的集中存储数据的结构: 列表 集合 字典 元组 字符串 双队列 堆 其中最常见的就是列表,字典. 2.下面讲一些运用循环获取字典列表的元素 >>> dic={ ...

  7. DAOFactory复用代码

    工厂设计模式 public class DaoFactory { private static final DaoFactory factory = new DaoFactory(); private ...

  8. Exception in thread "main" org.hibernate.TransientObjectException: object references an unsaved tran

    今天在使用一对多,多对一保存数据的时候出现了这个错误 Hibernate错误: Exception in thread "main" org.hibernate.Transient ...

  9. java面试题整理(1)

    1.Equals与==的区别? ==是判断两个变量或者实例是不是指向同一个内存地址 equals是判断两个变量或者实例所指向的内存地址中的值是不是相同 2.Object有哪些公用方法? 方法equal ...

  10. 手機Web頁面信息

    手機瀏覽器的寬度為980px: 使用980px寫頁面時,若是遇到字體變大情況,是因為block或者inline-block沒有設置寬高.設置即顯示正常. 980px設計,禁止手機頁面縮放: <m ...