jQuery全屏滚动插件fullPage.js/可制作全屏滚动网页

   
//需要连接 连接的三个文件
<link rel="stylesheet" href="css/jquery.fullPage.css">    //css文件
<script src="js/jquery-1.8.3.min.js"></script>            //jQuery 1.8.3的版本                    
<script src="js/jquery.fullPage.min.js"></script>         //fullPage插件的压缩版本

   
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}     //可以改动 设置的是网页中的文字 <无关紧要>
</style>
<script>
$(function(){
	$('#dowebok').fullpage({                                                 
        //fullpage       比较重要 设置的是插件的基本设置  后面的
		sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']             
        //sectionsColor  当没有背景图片的时候这个就是设置背景颜色的否则就是空白  数组的形式 中间以逗号隔开 颜色不管是十六进制还是英文单词都需要用单引号包着
	});
});
</script>
   
<div id="dowebok">                                      //绑定的大盒子 设置滚动的盒子
	<div class="section">
		<h3>第一屏</h3>
		<p>fullPage.js — 基本演示</p>  
	</div>
	<div class="section">                               //滚动的第二屏幕 如果在里面添加div和slide的样式就可以增加横向 点击
		<div class="slide"><h3>第二屏的第一屏</h3></div>
		<div class="slide"><h3>第二屏的第二屏</h3></div>
		<div class="slide"><h3>第二屏的第三屏</h3></div>
	</div>
	<div class="section">
		<h3>第三屏</h3>
	</div>
	<div class="section">
		<h3>第四屏</h3>
		<p>这是最后一屏</p>
	</div>
</div>

   
<script>
$(function(){
    $('#dowebok').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],   //和上面一样 sectionsColor 是设置每一屏的颜色 必须用逗号隔开 单引号包着
        continuousVertical: false,                                  //设置是否滑到底层再往下滚动是第一张图 设置true是执行此操作 设置false是不执行 默认不执行  不执行就不设置
    });    
});
</script>
<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
        <p>fullPage.js — 循环演示</p>                               
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
        <p>这是最后一屏了，继续往下滚返回第一屏</p>
    </div>
</div>

   
<title>fullPage.js — 绑定菜单演示_dowebok</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<style>
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}
#menu li { float: left; margin:  0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script>
$(function(){
    $('#dowebok').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        //设置颜色参数
        anchors: ['page1', 'page2', 'page3', 'page4'],
        //定义锚链接
        menu: '#menu'
        //绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
    });
});
</script>
<ul id="menu">
    <li data-menuanchor="page1" class="active"><a href="#page1">第一屏</a></li>
    <li data-menuanchor="page2"><a href="#page2">第二屏</a></li>
    <li data-menuanchor="page3"><a href="#page3">第三屏</a></li>
    <li data-menuanchor="page4"><a href="#page4">第四屏</a></li>
</ul>
<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
        <p>fullPage.js — 绑定菜单演示</p>
    </div>
    <div class="section">
        <h3>第二屏</h3>
        <p>请查看左上角，点击可以控制</p>
    </div>
    <div class="section">
        <h3>第三屏</h3>
        <p>绑定的菜单没有默认的样式，你需要自行编写</p>
    </div>
    <div class="section">
        <h3>第四屏</h3>
        <p>这是最后一屏</p>
    </div>
</div>

   
<script>
$(function(){
    $('#dowebok').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        //设置颜色属性
        'navigation': true,
        //是否显示项目导航 默认值是false 需要设置true
    });
});
</script>
<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
        <p>fullPage.js — 项目导航演示</p>
    </div>
    <div class="section">
        <h3>第二屏</h3>
        <p>请查看右边的圆圈</p>
    </div>
    <div class="section">
        <h3>第三屏</h3>
        <p>圆圈还可以设置位置，颜色，加上 tip，点击可以控制</p>
    </div>
    <div class="section">
        <h3>第四屏</h3>
        <p>这是最后一屏</p>
    </div>
</div>

   
 <style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<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>
<script>
$(function(){
    $('#dowebok').fullpage({
        sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        //设置颜色属性
        continuousVertical: true
        //设置是否循环滚动，与 loopTop 及 loopBottom 不兼容 默认是false
    });
    setInterval(function(){   //定时器 三秒一执行
        $.fn.fullpage.moveSectionDown();  //向下滚动
    }, 3000);
});
</script>

   
 <style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
        <p>请滚动到第二屏查看</p>
    </div>
    <div class="section">
        <div class="slide"><h3>第二屏的第一屏</h3></div>
        <div class="slide"><h3>第二屏的第二屏</h3></div>
        <div class="slide"><h3>第二屏的第三屏</h3></div>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script>
$(function(){
    $('#dowebok').fullpage({
        sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        //设置颜色属性
        loopBottom: true
        //loopBottom    布尔值 false   滚动到最底部后是否滚回顶部
    });
    setInterval(function(){
        $.fn.fullpage.moveSlideRight();
        //moveSlideRight()  slide 向右滚动
        // moveSlideLeft() slide 向左滚动
    }, 3000);
});
</script>

   
 <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
 <style>
.section { text-align: center; font: 30px "Microsoft Yahei"; color: #fff;}
</style>
<div id="dowebok">
    <div class="section">
        <p>根据可视区域大小启用/关闭全屏滚动效果</p>
    </div>
    <div class="section">
        <p>如果可视区宽度小于1024，则关闭全屏滚动效果，使用自带的滚动条</p>
    </div>
    <div class="section">
        <p>请试着调整浏览器大小并查看滚动条是否出现</p>
    </div>
    <div class="section">
        <p>第四屏</p>
    </div>
</div>
<script>
$(function(){
    $('#dowebok').fullpage({
        sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
        //设置颜色属性
    });
    $(window).resize(function(){
    //当调整浏览器窗口的大小时，发生 resize 事件。resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数
        autoScrolling();
        //true  是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条
    });
    function autoScrolling(){
        var $ww = $(window).width();
        if($ww < 1024){
            $.fn.fullpage.setAutoScrolling(false);
            //setAutoScrolling()    设置页面滚动方式，设置为 true 时自动滚动 设置为false不滚动
        } else {
            $.fn.fullpage.setAutoScrolling(true);
        }
    }
    autoScrolling();
});
</script>

fullPage.js 是 jQuery 的一个插件，主要功能是制作出全屏网站 fullPage插件的兼容性是兼容IE7浏览器往上 其余主流浏览器就不描叙了 fullpage插件支持以下操作

1、插件可以使用鼠标滑轮进行滚动

2、当竖屏的时候支持键盘的上下箭头滚动  横屏对照可以使用的是左右箭头

3、能使用 多个回调函数 制作出动画效果  但是需要涉及到jQuery ui的插件连接<在下面有>

4、fullPage 同样也是 支持 触摸事件  如可触摸式笔记本 平板  手机

5、能在属性操作时 使用css3动画 但是要注意 css3的兼容性

6、能够自适应 屏幕的大小

7、可以设置页面的滚动宽度 以及背景颜色 是否循环播放  可以时候回调函数  文本可以设置样式

使用 fullPage中我引用的文件具体如下所示  <必须注意链接顺序 先css文件 再jQuery 1.8.3版本的 然后才是 jQuer ul 或者是 fullPage插件>  注意！ 所需链接文件可像我留言索要  也可寻找自行下载

    
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"> //这是设置关于插件的样式 需要链接
<script src="js/jquery.min.js"></script>                               // jQuery 1.8.3版本
<script src="js/jquery-ui.js"></script>                       // JQuery ui 版本1.12.1 <可选>需要设置Easing参数时 必须链接 否则出错
<script src="js/jquery.fullPage.js"></script>                          // 最后是此次的正主 fullPage插件

配置

1、选项

2、方法

3、回调函数