Fullpage入门指南

最新推荐文章于 2024-06-24 17:03:04 发布

huo_bao

最新推荐文章于 2024-06-24 17:03:04 发布

阅读量401

点赞数

文章标签：全屏滚动

简介：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

文件下载地址：访问密码 73a1 欢迎学习交流--梦幻雪冰

单屏滚动效果如下：

<!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；就可以解决该问题了。

文档：

特此声明：图片来源于问说网

huo_bao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Fullpage入门指南

简介：fullPage.js是一个基于jQuery的全屏滚动插件，它能够很方便、很轻松的制作出全屏网站主要功能：支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机、平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等
复制链接

扫一扫