jquery的fullpage.js插件的使用
https://alvarotrigo.com/fullPage/#3rdPage 官网
https://github.com/alvarotrigo/fullPage.js github源码
http://www.jq22.com/jquery-info1124 使用
https://zhidao.baidu.com/question/2011521041627168428.html 子页面滚动
http://lib.csdn.net/article/css3/37060 fullpage.js的API
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ART000</title> <link rel="stylesheet" href="css/base.css" /> <link rel="stylesheet" href="css/animate.min.css" /> <link rel="stylesheet" href="css/jquery.fullpage.css" /> </head> <body> <div id="fullpage"> <div class="section"> <div class="logo1"> 还好 </div> <div class="logo2 animated fadeInDown"> 还好哈 </div> </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> <script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.min.js"></script> <script src="js/jquery.fullpage.js"></script> <script src="js/scrolloverflow.js"></script> <script> $(function(){ $('#fullpage').fullpage({ //单个屏幕内可滚动 scrollOverflow: true, /** * 滚动前的回调函数 * @param {Object} index index 是离开的“页面”的序号，从1开始计算； * @param {Object} nextIndex nextIndex 是滚动到的“页面”的序号，从1开始计算； */ onLeave: function (index, nextIndex) { if(index==1){ $('.logo1').removeClass('rollIn animated'); $('.logo1').addClass('animated fadeOut'); } }, /** * 滚动到某一屏后的回调函数 * @param {Object} anchorLink 锚链接的名称 * @param {Object} index index 是序号，从1开始计算 */ afterLoad: function(anchorLink,index){ if(index==1){ $('.logo1').removeClass('animated fadeOut'); $('.logo1').addClass('rollIn animated'); } } }); }); </script> </body> </html>