静态页验证
1. 页切换:fullPage.js(jQuery插件)
2. 组件切换:入场,出场动画
3. 注意问题:DOM事件循环无限传播
http://www.uedsc.com/fullpage.html
主要功能
1. 支持鼠标滚动
2. 支持前进后退和键盘控制
3. 多个回调函数
4. 支持手机、平板触摸事件
5. 支持 CSS3 动画
6. 支持窗口缩放
7. 窗口缩放时自动调整
8. 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
9. fullPage.js 支持 IE8+ 及其他现代浏览器。
使用方法
1、引入文件
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
2、HTML
<div id="fullpage">
<div class="section">第一屏</div>
<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>
3、JavaScript
$(function(){
$('#fullpage').fullpage({
'verticalCentered': false,
'css3': true,
'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
anchors: ['page1', 'page2', 'page3', 'page4'],
'navigation': true,
'navigationPosition': 'right',
'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple']
})
})
每一个页面的Div都要设置class=”section”
<!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 type="text/css">
body{
margin: 0;
padding: 0;
}
.component{
width: 50%;
height: 50px;
margin-bottom: 20px;
background-color: #eee;
}
</style>
<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>
<script type="text/javascript">
$(function (){
$('#h5').fullpage({
'sectionsColor': ['#254875','#00ff00','#254587','#695684'],
onLeave:function(index,nextIndex,direction){
// debugger
$('#h5').find('.page').eq(index).trigger('onLeave')
},
afterLoad:function(anchorLink,index){
// debugger
$('#h5').find('.page').eq(index-1).trigger('onLoad')
}
});
$('.page').on('onLeave',function(){
console.log($(this).attr('id'),'===>','onLeave');
})
$('.page').on('onLoad',function(){
console.log($(this).attr('id'),'===>','onLoad');
})
});
</script>
<body>
<!-- 用于验证 fullpage.js 切换页面,以及内容组织结构可用,组件能够进行动画 -->
<div id="h5">
<div class="page section" id="page-1">
<div class="component log">logo</div>
<div class="component slogan">logan</div>
</div>
<div class="page section" id="page-2">
<div class="component log">dds</div>
<div class="component desc">dds</div>
</div>
<div class="page section" id="page-3">
<div class="component bar">dds</div>
<div class="component desc">dds</div>
</div>
<div class="page section" id="page-3">
</div>
</div>
</body>
</html>
当页面切换时,OK
组件切换
//组件切换 // 渐隐渐现
$('.conponent').on('onLoad',function(){
$(this).fadeIn();
})
$('.conponent').on('onLeave',function(){
$(this).fadeOut();
})
然后我们把这段代码写入$(‘.page’)
无限增加->卡死
page->component->page->componment………
$('.page').on('onLeave',function(){
console.log($(this).attr('id'),'===>','onLeave');
$(this).find('.component').trigger('onLeave');
})
$('.page').on('onLoad',function(){
console.log($(this).attr('id'),'===>','onLoad');
$(this).find('.component').trigger('onLoead');
});
所以我们在这里可以把trigger换成triggerHandler.或者是在.component函数里增加
return false,执行完不要再向上传播