最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果。

本人做的效果:

PC端:http://demo.qpdiy.com/hxw/ss/h/index.html

移动端:http://demo.qpdiy.com/hxw/ss/h/s.html

首先使用要引入插件

<link rel="stylesheet" href="../c/jquery.fullPage.css" media="all"/>
<script type="text/javascript" src="../j/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../j/lib/jquery.easings.min.js"></script>
<script type="text/javascript" src="../j/lib/jquery.fullPage.js"></script>

HTML代码

1
2
3
4
5
6
7
8
9
10
11
<div id="fullpage">
    <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>

JavaScript

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

通过JS可对插件常见参数进行配置,如:

//定义锚链接
anchors: ['page1', 'page2', 'page3', 'page4'],
// 是否显示项目导航
navigation: true,
navigationTooltips: ['首页', '二', '三', '四'],
navigationColor: '#000',
navigationPosition: 'left',
// 滚动到最底部后是否滚回顶部
loopBottom: true,
// 每一屏底色
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', '#EAE1C0'],
// 是否显示左右滑块的项目导航
slidesNavigation: true,
// 左右滑块的箭头的背景颜色
controlArrowColor: 'yellow',
// 左右滑块是否循环滑动
loopHorizontal: false,

//禁止使用CSS3进行页面切换,改用JS,默认是ture。经试验发现FF中如果用CSS3切换的话视频会放不出来(除第一屏)

css3:false,
// 离开某一屏的回调函数

onLeave: function(index, nextIndex, direction) {
  console.log(index, nextIndex, direction);
  if (index == 3 && nextIndex == 4) {
  console.log('向下滑动')
}
}

值得说明一下的是 menu: true只有在HTML定义了以下内容的时候才会起效果。

<ul id="myMenu" style="position:fixed;top:100px;">
<li data-menuanchor="firstPage" class="active"><a href="#page1">First section</a></li>
<li data-menuanchor="secondPage"><a href="#page2">Second section</a></li>
<li data-menuanchor="thirdPage"><a href="#page3">Third section</a></li>
<li data-menuanchor="fourthPage"><a href="#page4">Fourth section</a></li>
</ul>

可见即可通过JS配置导航,也可先写好导航再倒入到插件中

详细参考资料:

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

中文版:http://www.dowebok.com/77.html

使用参考网站:

http://www.douyutv.com/cms/about/jobs.html#page5

http://www.dowebok.com/demo/2014/97/

整屏滚动效果 jquery.fullPage.js插件+CSS3实现的更多相关文章

  1. fullPage教程 -- 整屏滚动效果插件 fullpage详解

    1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href=&qu ...

  2. jquery.fullPage.js全屏滚动插件

    注:本文内容复制于http://www.51xuediannao.com/js/jquery/jquery.fullPage.html 和 http://www.360doc.com/content/ ...

  3. jQuery插件jquery.fullPage.js

    简介如今我们经常能看到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或者色块做背景,再添加一些简单的内容,显得格外的高端大气上档次,比如 iPone 5C 的介绍页面.QQ浏览器的官方网站.百度史 ...

  4. 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

  5. fullPage.js插件用法(转发)

    fullPage.js主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速 ...

  6. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  7. jquery.autocomplete.js 插件的自定义搜索规则

    这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...

  8. jQuery.cookie.js插件了解及使用方法

    jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...

  9. 异步上传图片,光用jquery不行,得用jquery.form.js插件

    异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...

随机推荐

  1. Angular2中的Service并不是单例模式

    2015年做了一个使用angularjs 1框架的项目,2016年伊始公司的项目转为使用Angular2框架. 在开发过程中发现了一个坑,这个坑就是在Angular JS 1.x中的Service是单 ...

  2. 前端 PC端兼容性问题总结

    1.如果图片加a标签在IE9-中会有边框 解决方案: img{border:none;} 2.rgba不支持IE8 解决方案:可以用 opacity  eg: opacity:0.7;/*FF chr ...

  3. Gpt转mbr

    1)Shift + F10 2)diskpart 3)list disk 4)select dist 0 5)clean 6)convert mbr [注]mbr常用于windows操作系统,而gpt ...

  4. soa服务治理-dubbo

    dubbo官网:http://dubbo.io/Home-zh.htm 学习点: 1.  日志的配置

  5. 标准I/O 缓存

    标准I/O提供了三种类型的缓存: (1)全缓存.在这种情况下,当填满标准I/O 缓存后才进行实际 I/O 操作.对于驻在磁盘上的文件通常是由标准I/O库实施全缓存的.在一个流上执行第一次I/O操作时, ...

  6. C#中的系统时间获取问题

    C#获取当前系统时间 2010-01-02 16:24 --DateTime 数字型 System.DateTime currentTime=new System.DateTime(); 取当前年月日 ...

  7. Python基础知识学习_Day5

    一.生成器和迭代器 1.列表生成 >>> a [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] >>> a = map(lambda x:x+1, a ...

  8. Salesforce自主学习(一)

    Salesforce学习--接触Apex: 学习目标: 1.描述出Apex程序语言的关键特点: 2.保存一个Apex类并用另一个Apex类来调用它的方法: 3.使用Developer Console检 ...

  9. Linux下制作静(动)态库

    关键命令: 动态库制作命令 gcc xxx.c -fPIC -shared -o libxxx.so 静态库制作命令 gcc -c xxx.c ar crv libxxx.a xxx.o 例: //h ...

  10. python3 数据类型

    Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Sets(集合) Dictionary(字典) Number(数字) Py ...