用fullPage来实现全屏滚动效果
【注意】全部的page要用div包裹，id为fullpage.不能直接包在body中javascript
【使用fullpage的步骤】css
一、导入 JQuery.js,fullpage.js,fullpage.css <!-- fullPage.js 必须在 JQuery.js 以后导入，不然无效 -->java
二、组建网页布局，最外层 id=fullpage 单页class=section 幻灯片 class="slide"浏览器
三、JS中使用$(“#fullpage").fullpage();调用执行ide
【代码以下】函数
《css样式部分》布局
<style type="text/css">
.section1{
background-color: yellowgreen;
}
.section2{
background-color: deepskyblue;
}
.section3{
background-color: tomato;
}
.section4{
background-color: cadetblue;
}
#menu{
position: fixed;/*生成绝对定位的元素，相对于浏览器窗口进行定位*/
left: 20px;
top: 10px;
z-index: 999;/*不被覆盖，显示在最外层*/
padding: 0px;
}
#menu li{
float: left;
list-style: none;
width: 80px;
height: 25px;
line-height: 25px;
margin: 0px 5px;
text-align: center;
background-color: #BCBCBC;
border-radius: 7px;
}
#menu li a{
text-decoration: none;
color: white;
}
</style>ip
《body部分》文档
<body>
<ul id="menu">
<!--data-menuanchor是设置要选中的栏目-->
<li data-menuanchor="page1"><a href="#page1">page1</a></li>
<li data-menuanchor="page2"><a href="#page2">page2</a></li>
<li data-menuanchor="page3"><a href="#page3">page3</a></li>
<li data-menuanchor="page4"><a href="#page4">page4</a></li>
</ul>
<!--全部page要用div包裹，id为fullpage。不能直接包在body中-->
<div id="fullpage" >
<!-- 全部的单页，class为section -->
<div class="section section1">page1</div>
<div class="section section2">
<div class="slide">page2-1</div>
<div class="slide">page2-2</div>
<div class="slide">page2-3</div>
</div>
<div class="section section3">page3</div>
<div class="section section4">page4</div>
</div>
</body>it
《js部分》
<script type="text/javascript">
$(function(){/*文档准备函数*/
/*添加完单页后，需调用.fullpage()方法，才能生效*/
$("#fullpage").fullpage({
anchors: ['page1', 'page2', 'page3', 'page4'],
menu:"#menu",
navigation:true,
});
- 1. 手机端实现fullPage——全屏滚动效果
- 2. 全屏滚动-fullPage
- 3. fullPage 全屏滚动【上下滚动】效果
- 4. 原生js实现全屏滚动--fullPage
- 5. 全屏滚动实现：fullPage.js和fullPage
- 6. js全屏滚动效果
- 7. angular-fullpage实现尾屏效果
- 8. jQuery全屏滚动插件fullPage
- 9. angularjs fullpage全屏滚动插件
- 10. jQuery----全屏滚动插件fullPage
- 更多相关文章...
- • SVG 模糊效果 - SVG 教程
- • ionic 滚动条 - ionic 教程
- • ☆基于Java Instrument的Agent实现
- • Spring Cloud 微服务实战(三) - 服务注册与发现
-
每一个你不满意的现在，都有一个你没有努力的曾经。