您的位置：首页 > Web前端 > JQuery

jQuery全屏滚动插件fullPage.js

2014-09-16 14:54 861 查看

单屏效果如下：

简介：fullPage.js是一个基于jQuery的全屏滚动插件，它能够很方便、很轻松的制作出全屏网站

主要功能：

支持鼠标滚动

支持前进后退和键盘控制

多个回调函数

支持手机、平板触摸事件

支持 CSS3 动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

那么来简单实现一下单屏滚动效果吧~

欢迎学习交流--梦幻雪冰

首先引入文件：reset.css

jquery.fullPage.css

jquery.fullPage.min.js

jquery-1.8.3.min.js

jquery-ui-1.10.3.min.js

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="jquery.fullPage.css">
<link rel="stylesheet" href="reset.css">
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery-ui-1.10.3.min.js"></script>
<script src="jquery.fullPage.min.js"></script>
<style>
/*自定义导航栏*/
.nav {
position: fixed;
left: 10px;
top: 10px;
}
.nav a,
.nav li {
float: left;
}
.nav li {
margin-right: 5px;
}
.nav a {
padding: 10px 20px;
background: #fff;
color: #4BBFC3
text-decoration: none;
}
/*选中跳转栏目的效果*/
.nav .active a{
background: #333;
}
.section {
overflow: hidden;
color: #fff;
font: 50px "Microsoft Yahei";
text-align: center;
}
</style>
<script>
$(document).ready(function() {
$.fn.fullpage({
// 设置每一屏的背景颜色
'slidesColor': ['#999', '#4BBFC3', '#7BAABE', '#f90','#1bbc9b', '#4BBFC3', '#7BAABE','#f90'],
// 定义锚链接
'anchors': ['page1', 'page2', 'page3', 'page4','page5','page6','page7','page8'],
// 是否使用 CSS3 transforms 滚动,设置为true自定义导航栏才能显示
'css3': true,
// 绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
'menu' : '.nav',
// 字体是否随着窗口缩放而缩放
'resize': true,
// 滚动速度，单位为毫秒,默认为700
'scrollingSpeed': 800
});
});
</script>
</head>
<body>
<ul id='menu' class='nav'>
<li data-menuanchor="page1"><a href="#page1" class='active'>第1个项目</a></li>
<li data-menuanchor="page2"><a href="#page2">第2个项目</a></li>
<li data-menuanchor="page3"><a href="#page3">第3个项目</a></li>
<li data-menuanchor="page4"><a href="#page4">第4个项目</a></li>
<li data-menuanchor="page5"><a href="#page5">第5个项目</a></li>
<li data-menuanchor="page6"><a href="#page6">第6个项目</a></li>
<li data-menuanchor="page7"><a href="#page7">第7个项目</a></li>
<li data-menuanchor="page8"><a href="#page8">第8个项目</a></li>
</ul>
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 【梦幻雪冰】基本演示</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 class="section">
<h3>第五屏</h3>
</div>
<div class="section">
<h3>第六屏</h3>
</div>
<div class="section">
<h3>第七屏</h3>
</div>
<div class="section">
<h3>第八屏</h3>
<p>这是最后一屏：【梦幻雪冰】</p>
</div>
</body>
</html>

注意几点：

【1】结构中的div的类名为“section”，因为 jquery.fullPage.css样式已经为大家写好了

【2】JavaScript代码要写在head里面，不然会出现文本内容不能居中和滚动效果出现问题

【3】为了实现字体随着窗口缩放而缩放，字体大小中属性值的单位不要用px而是用em

【4】设置导航栏，要定义导航栏的id或者是类名，绑定到menu属性里面(#menu或者.menu)，用data-menuanchor设置选中要跳转的栏目或者用data-index（设置active类名）
【5】为了防止在滚动栏目底部显示下一个栏目的问题，可以在.section类选择器里面添加一句overflow：hidden；就可以解决该问题了。

文档：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航