基本信息
源码名称：fullpage:全屏滚动分屏代码jQuery
源码大小：0.11M
文件格式：.zip
开发语言：js
更新时间：2019-07-18
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery全屏滚动分屏代码</title>
<meta name="keywords" content="">
<mete name="decration" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />

<style>
*{ padding:0px; margin:0}
body{ color:#fff; font-family:"Microsoft Yahei"; text-align:center;}
.logo{ border:3px solid #fff; font:bold 24px/100px "Microsoft Yahei"; width:100px; height:100px; position:fixed; top:50px; left:50px; z-index:999;}
.menu{ height:42px; background:rgba(0,0,0,0.6);position:fixed;  top:0px; left:0; z-index:998; width:100%; }
.menu li{list-style:none; float:left; display:inline-block; font:16px/42px "Microsoft Yahei";}
.menu li a{ color:#fff; text-decoration:none; text-align:center; display:block; padding:0px 15px}
.menu li.active{ background:#F00;}
</style>

</head>
<body>

<div id="fullpage">

	<div class="logo" id="logo">logo</div>

	<!--固定导航-->
	<ul class="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 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>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	$('#fullpage').fullpage({
		
		sectionsColor:['orange','#5c7ff1','green','#cccccc'], //控制每个section的背景颜色
		
		controlArrow:true,   //是否隐藏左右滑块的箭头(默认为true)
		
		verticalCentered: true,  //内容是否垂直居中(默认为true)
		 
		css3: true, //是否使用 CSS3 transforms 滚动(默认为false)
		 
		resize:false, //字体是否随着窗口缩放而缩放(默认为false)
		
		scrolllingSpeed:1000,  //滚动速度，单位为毫秒(默认为700)
		
		anchors:['page1','page2','page3','page4'],  //定义锚链接(值不能和页面中任意的id或name相同，尤其是在ie下，定义时不需要加#)  

		lockAnchors:false,  //是否锁定锚链接，默认为false。设置weitrue时，锚链接anchors属性也没有效果。
		
		loopBottom:false,  //滚动到最底部后是否滚回顶部(默认为false)
		
		loopTop:false, //滚动到最顶部后是否滚底部
		
		loopHorizontal:false,//左右滑块是否循环滑动
		
		autoScrolling:true, // 是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条
		
		scrollBar:false,//是否显示滚动条，为true是一滚动就是一整屏
		
		fixedElements:".logo", //固定元素
		
		menu:".menu",
		
		keyboardScrolling:true, //是否使用键盘方向键导航(默认为true)
		
		keyboardScrolling:true, //页面是否循环滚动（默认为false）
		
		navigation:true, //是否显示项目导航（默认为false）
		
		navigationTooltips:["page1","page2","page3","page4"],//项目导航的 tip
		
		navigationColor:'#fff', //项目导航的颜色
		
		slidesNavigation:true,
		
	});

});
</script>

</body>
</html>