技术选型
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; }) });
