码迷,mamicode.com
首页 > 其他好文 > 详细

分屏滚动

时间:2016-12-24 19:44:39      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:title   cal   lin   div   ica   3.0   ble   beta   als   

用到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>

分屏滚动

标签:title   cal   lin   div   ica   3.0   ble   beta   als   

原文地址:http://www.cnblogs.com/scjh/p/6217805.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!