<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link rel="stylesheet" href="animate.min.css">
<style type="text/css">
*{margin: 0;padding: 0;}
html,body{ 100%;height: 100%;}
.body{ 100%;height: 100%;overflow: auto;}
.part{ 100%;font-size: 40px; text-align: center;line-height: 300px; color: #fff;}
.part1{height: 1000px;background-color: #51C577;}
.part2{height: 650px;background-color: #A7C551;}
.part3{height: 780px;background-color: #51C5A9;}
.part4{height: 1200px;background-color: #51A5C5;}
.nav_box{ 60px; height: auto;position: fixed;right: 10%;bottom: 30%;}
.nav_box li{
60px;height: 60px;
margin: 10px 0;
border-radius: 100%;
background-color: #3F3F3F;
text-align: center;
line-height: 60px;
font-size: 26px;
font-weight: bold;
color: #fff;
list-style: none;
cursor: pointer;
}
.nav_box .active{background-color: #F7FC4F;color: #000;}
#dowebok {
animate-duration: 2s;
animate-delay: 1s;
animate-iteration-count: 2; opacity: 0;
}
#dowebok1{
animate-duration: 2s;
animate-delay: 1s;
animate-iteration-count: 2; opacity: 0;
}
#dowebok2 {
animate-duration: 2s;
animate-delay: 1s;
animate-iteration-count: 2; opacity: 0;
}
#dowebok3 {
animate-duration: 2s;
animate-delay: 1s;
animate-iteration-count: 2; opacity: 0;
}
@-webkit-keyframes fadeIndown{
from{-webkit-transform: translateY(100%);transform: translateY(100%);opacity: 0;}
to{-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;}
}
@keyframes fadeIndown{
from{-webkit-transform: translateY(100%);transform: translateY(100%);opacity: 0;}
to{-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;}
}
.tfadeIndown{
-webkit-animation: 1s .6s linear both;
}
.tfadeIndown{
-webkit-animation:fadeIndown 1s .6s linear both;
}
</style>
<body>
<div class="body">
<div class="part part1"><div class="" id="dowebok">这是右边边出来的</div></div>
<div class="part part2">
<div class="" id="dowebok1">这是左边出来的</div>
</div>
<div class="part part3">
<div class="" id="dowebok2">这事下面出来的内容</div>
</div>
<div class="part part4">
<div class="" id="dowebok3">这事上面出来的内容</div>
</div>
</div>
<ul class="nav_box">
<li class="active">一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>TOP</li>
</ul>
</body>
<script src="jquery.min.js"></script>
<script type="text/javascript">
/*
*==========================================================
*======================图片懒加载方法扩充=======================
*==========================================================
*/
jQuery.fn.extend({
lazyImg:function (lazeImgUrl){
this.img = $(this).find('img');
this.imgLength = this.img.length;
var i=0;
var temporary;
for (;i < this.imgLength;i++) {
temporary = this.img.eq(i);
temporary.addClass('lazyload');
temporary.attr('data-src',temporary.attr('src'));
temporary.attr('src',lazeImgUrl);
}
},
loadImg:function (){
this.img = $(this).find('img');
this.imgLength = this.img.length;
var i=0;
var temporary;
for (;i < this.imgLength;i++) {
temporary = this.img.eq(i);
if(temporary.hasClass('lazyload')){
temporary.removeClass('lazyload');
temporary.attr('src',temporary.attr('data-src'));
temporary.attr('data-src','');
}
}
}
})
//添加jq方法，打字用的
jQuery.fn.extend({
printer:function (speed,delay,text){
var _this = this;
var data = text || _this.text(),
delay = delay || 0,
speed = speed || 50;
text == null ? _this.text(""): null;
var len = data.length,arr = [],str = "",n = 0;
for (var i= 0; i < len ; i++){arr.push(data.substring(i,i+1));}
var t1 = setTimeout(function (){
var t2 = setInterval(function (){
str += arr[n] ;
_this.text(str) ;
n ++;
if(n>=len)
clearInterval(t2);
},speed)
clearTimeout(t1);
},delay)
}
})
$(function(){
var arr=[];
var len=$('.part').length;
var body=$('.body');
var nav= $('.nav_box').find('li');
var isScrolling = false;
var part = $('.part');
//存放上一个活动页面的索引值
var prevIndex = 0;
arr[0]=-($(window).height())/3
//alert(arr[0])
for(var i=0; i<len; i++){
arr[i+1]=arr[i]+$('.part').eq(i).height();
//alert(arr[1])
}
alert(arr)
body.on('scroll',function(){
for (var i = 0; i < len; i++ ) {
if(body.scrollTop()> arr[i]&& body.scrollTop()<arr[i+1]){
nav.eq(i).addClass('active').siblings().removeClass('active');
if(i != prevIndex){
prevIndex = i;
animate1 (i)
}
}
}
})
nav.on('click',function(){
if(!isScrolling){
isScrolling = true;
var _this=$(this).index();
if(_this==len){
_this=0;
}
body.animate({'scrollTop':arr[_this]-arr[0]},400,function(){isScrolling = false;})
}
})
function animate1(prevIndex){
switch(prevIndex)
{
case 0:
if(!part.eq(0).hasClass('animated')){
$('#dowebok').addClass('tfadeIndown');
//part.eq(0).addClass('bounceInRight');
//执行动作
// part.eq(0).printer(200,0,'这是第一11111111页');
}
break;
case 1:
if(!part.eq(1).hasClass('animated')){
$('#dowebok1').addClass('tfadeIndown');
// part.eq(1).addClass('bounceInLeft');
//执行动作
// part.eq(1).printer(200,0,'这是第一22222页');
}
break;
case 2:
if(!part.eq(2).hasClass('animated')){
// $('#dowebok2').addClass('animated bounceInDown');
$('#dowebok2').addClass('tfadeIndown');
//part.eq(2).addClass('bounceInDown');
//执行动作
// part.eq(2).printer(200,0,'这是第一3333333333333页');
}
break;
case 3:
if(!part.eq(3).hasClass('animated')){
$('#dowebok3').addClass('tfadeIndown');
// part.eq(3).addClass('bounceInUp');
//执行动作
//part.eq(3).printer(200,0,'这是第一4444444444444444页');
}
break;
}
}
})
</script>
</html>