首页 > 代码库 > 分屏滚动
分屏滚动
用到fullPage插件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<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.6.7/jquery.fullPage.css"/>
<style media="screen">
*{
margin: 0px;
padding: 0px;
text-align: center;
}
</style>
</head>
<body>
<div id="fullpage">
<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 class="section">第四页</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(‘#fullpage‘).fullpage({
// 设置每一屏的颜色
sectionsColor:[‘rgb(92, 185, 135)‘,‘rgb(226, 179, 99)‘,‘rgb(101, 175, 213)‘,‘rgb(223, 135, 175)‘],
// 隐藏尖头 , 默认为true
// controlArrows:false,
// 每一页的内容是否垂直居中 , 默认为true
// verticalCentered:false
// 字体是否随着窗口缩放而缩放 , 默认为false
// resize:true
// 滚动速度，单位为毫秒，默认为700
// scrollingSpeed:2000
// 定义锚链接
// anchors:[‘pag1‘,‘page2‘,‘page3‘,‘page4‘],
});
});
</script>
</html>
分屏滚动