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> ???????fullpage.js与animate.css搭配使用
原文地址：http://www.cnblogs.com/stella1024/p/8027052.html