静态页验证 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，执行完不要再向上传播