技术选型
html5 css3 jq
应用的插件
一、建一个测试页面，测试静态的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>慕课网2015课程学习情况</title>
<style>
body{
margin:0;
padding:0;
}
.component{
width: 50%;
height:50px;
margin-bottom:20px;
background-color: red;
display: none;
}
</style>
<body>
<!-- 用于验证 fullpage.js 切换页面，以及内容组织结构可用，组件能够进行动画 -->
<div id="h5">
<!-- 给每个需要翻页的页面添加section类 给定不同的ID -->
<div class="page section" id="page-1">
<div class="component">logo</div>
<div class="component slogan">slogan</div>
</div>
<div class="page section" id="page-2">
<div class="component">logo</div>
<div class="component slogan">slogan</div>
</div>
<div class="page section" id="page-3">
<div class="component">logo</div>
<div class="component slogan">slogan</div>
</div>
</div>
</body>
</html>
二、首先载入fullpage.js
<script type="text/javascript" src="../js/lib/jquery.js"></script>
<script type="text/javascript" src="../js/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/lib/jquery.fullPage.js"></script>
三、测试功能是否完好。
$(function (){
$(‘#h5‘).fullpage({
//传入背景色 sectionsColor 后面接对象。
‘sectionsColor‘: [‘#254875‘, ‘#00ff00‘, ‘#245874‘],
/*
* 传入回掉函数 onLeave afterLoad
* afterLoad
* 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，
* anchorLink 是锚链接的名称，index 是序号，从1开始计算
* onLeave
* 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：
* index 是离开的“页面”的序号，从1开始计算；
* nextIndex 是滚动到的“页面”的序号，从1开始计算；
* direction 判断往上滚动还是往下滚动，值是 up 或 down。
* */
onLeave: function (index, nextIndex, direction) {
//让page执行onLeave事件。
$(‘#h5‘).find(‘.page‘).eq(index-1).trigger(‘onLeave‘);
},
afterLoad: function (anchorLink, index) {
//让page执行onLoad事件。
$(‘#h5‘).find(‘.page‘).eq(index-1).trigger(‘onLoad‘);
},
});
//给page页面绑定onLeave事件。
$(‘.page‘).on(‘onLeave‘,function () {
console.log($(this).attr(‘id‘),‘====>‘,‘onleave‘);
//让component执行onLeave事件。
$(this).find(‘.component‘).trigger(‘onLeave‘);
})
//给page页面绑定onLoad事件。
$(‘.page‘).on(‘onLoad‘,function () {
console.log($(this).attr(‘id‘),‘====>‘,‘onLoad‘);
//让component执行onLoad事件。
$(this).find(‘.component‘).trigger(‘onLoad‘);
})
//给component页面绑定onLoad事件。
$(‘.component‘).on(‘onLoad‘,function () {
$(this).fadeIn();
//防止事件冒泡。循环传播。
return false;
})
//给component页面绑定onLeave事件。
$(‘.component‘).on(‘onLeave‘,function () {
$(this).fadeOut();
return false;
})
});
时间： 2024-08-10 21:19:42