最近很流行整屏滚动的效果,无论是在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代码

<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

$(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/

posted on 2014-11-19 16:17  小海豚Dolphins  阅读(6534)  评论(1编辑  收藏  举报