1. 引入jquery.js和jquery.fullPage.min.js

<script src="jquery.min.js"></script>
<script src="chajian/jquery.fullPage.min.js"></script>

2. 书写html

<div id="dowebok">
<div class="section section1">
<h3>第一屏</h3>
<p>fullPage.js — 回调函数演示</p>
</div>
<div class="section section2">
<h3>第二屏</h3>
<p>滚动到第二屏后的回调函数执行的效果</p>
</div>
<div class="section section3">
<h3>第三屏</h3>
<p>滚动到第三屏后的回调函数执行的效果</p>
</div>
<div class="section section4">
<h3>第四屏</h3>
<p>滚动到第四屏后的回调函数执行的效果</p>
</div>
</div>

3. 编写样式

.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}

4. 书写js

$(function(){
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
})
})

jQuery全屏滚动插件fullPage使用的更多相关文章

  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

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

  5. 【转载】jQuery全屏滚动插件fullPage.js

    文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...

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

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

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

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

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

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

  9. Scrollify – jQuery全屏滚动插件

    和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件.跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB.但功能上不如 fu ...

随机推荐

  1. 架构相关:组件化/模块化/工程化/性能优化/开发规范与团队协作/组件间调用与通信(flex/redux)/调试与测试

    https://github.com/fouber/blog http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html htt ...

  2. 20155321 《信息安全系统设计》Linux多线程的深入学习

    再次学习之多线程 基本概念的再次学习 线程是程序执行的最小单位(进程是资源管理的最小单位),线程隶属于某个进程中 进程有自己的数据段.代码段和堆栈段.线程通常叫做轻型的进程,每个线程共享其所附属进程的 ...

  3. 10.21 (上午) 开课一个月零十七天 (PHP基础语法)

    <?php $a = 6; echo $a; //注释语法 /* 多行注释 */ //输出语法 echo "hello"; echo "world",&q ...

  4. 02-web框架

    1 while True: print('server is waiting...') conn, addr = server.accept() data = conn.recv(1024) prin ...

  5. 5290: [Hnoi2018]道路

    5290: [Hnoi2018]道路 链接 分析: 注意题目中说每个城市翻新一条连向它的公路或者铁路,所以两种情况分别转移一下即可. 注意压一下空间,最后的叶子节点不要要访问,空间少了一半. 代码: ...

  6. P3707 [SDOI2017]相关分析

    P3707 [SDOI2017]相关分析 线段树裸题?但是真的很麻烦QAQ 题目给的式子是什么不用管,大力拆开,就是\(\frac{\sum x_iy_i-\overline xy_i-\overli ...

  7. JNDI是什么,怎么理解

    JNDI 是什么 JNDI是 Java 命名与目录接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之一,不少专家认为,没有透彻理解JNDI的 ...

  8. (转)js数组与字符串的相互转换方法

    一.数组转字符串 需要将数组元素用某个字符连接成字符串,示例代码如下: var a, b; a = new Array(0,1,2,3,4); b = a.join("-"); 二 ...

  9. selenium select 选择下拉框

    实战百度首页设置,浏览偏好设置. 打开首页,在非登录的情况下,查看分析页面元素,我们可以看到,我们首先要点击的是设置, 接着点击,搜索设置, 然后select选择下拉框. select_by_inde ...

  10. Idea for Mac 快捷键(快捷键选择:Mac OS X 10.5+)

    删除一行          command + delete 查找          command + f 查找替换          command + r 复制一行          comma ...