fullpage.js
网址：http://www.baidu.com/link?url=qpi7BBU_GcT2PXi4P4sg_FxF2WggFU-yXJYHbZB4MbUBXtqyO2YIp1yzkHz8sEey&wd=&eqid=f33d1b14000033a30000000256233ae8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css"/>
<script type="text/javascript">
</script>
<style type="text/css">
body{
color:#fff;
}
.slide{
text-align:center;
}
#header{
font-size:30px;
position:fixed;
top:0;
left:100px;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="fullpage">
<div class="section "><h1>这是第一屏</h1></div>
<div class="section ">
<div class="slide">第一张</div>
<div class="slide">第二张</div>
<div class="slide">第三章</div>
<div class="slide">第四章</div>
</div>
<div class="section "><h1>这是第三屏</h1></div>
<div class="section "><h1>这是第四屏</h1></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js"></script>
<script>
$(document).ready(function(){
//$('#fullpage').fullpage();
$('#fullpage').fullpage({
sectionsColor:['green','orange','gray','red'],
//controlArrows:false,
//verticalCentered:false,
//resize:true,
//scrollingSpeed:2000
anchors:['page1','page2','page3','page4'],
//lockAnchors:true
css3:true,
//loopTop:true,
//loopBottom:true,
//loopHorizontal:true,
//autoScrolling:false
//scrollBar:true,
//paddingTop:'200px',
//paddingBottom:'200px'
fixedElements:'#header',
//keyboardScrolling:false,
//touchSensitivity:移动设备中
//continuousVertical:true
animateAnchor:false,
recordHistory:true
});
});
</script>
</body>
</html>
---恢复内容结束---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css"/>
<script type="text/javascript">
</script>
<style type="text/css">
body{
color:#fff;
}
.slide{
text-align:center;
}
#header{
font-size:30px;
position:fixed;
top:0;
left:100px;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="fullpage">
<div class="section "><h1>这是第一屏</h1></div>
<div class="section ">
<div class="slide">第一张</div>
<div class="slide">第二张</div>
<div class="slide">第三章</div>
<div class="slide">第四章</div>
</div>
<div class="section "><h1>这是第三屏</h1></div>
<div class="section "><h1>这是第四屏</h1></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js"></script>
<script>
$(document).ready(function(){
//$('#fullpage').fullpage();
$('#fullpage').fullpage({
sectionsColor:['green','orange','gray','red'],
//controlArrows:false,
//verticalCentered:false,
//resize:true,
//scrollingSpeed:2000
anchors:['page1','page2','page3','page4'],
//lockAnchors:true
css3:true,
//loopTop:true,
//loopBottom:true,
//loopHorizontal:true,
//autoScrolling:false
//scrollBar:true,
//paddingTop:'200px',
//paddingBottom:'200px'
fixedElements:'#header',
//keyboardScrolling:false,
//touchSensitivity:移动设备中
//continuousVertical:true
animateAnchor:false,
recordHistory:true
});
});
</script>
</body>
</html>
