master

分支 (1)

管理

管理

master

Example
/
animate.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>animate</title>
	<style type="text/css">
		body{
			width: 100%;
			font-size: 14px;
			background:#fff;
			margin: 0px;
			padding: 0px;
			overflow: auto;
		}
		.container{
			position: relative;
			height: 1200px;
			width: 1024px;
			margin: 0px auto;
			overflow: auto;
		}

		.left_ball,.right_ball{
			position: absolute;
			top:0px;
			width:128px;
			height:128px;
			line-height: 128px;
			text-align: center;
			border-radius: 128px;
			color: #fff;
		}

		.container .left_ball{
			left:0px;
			background: skyblue;
		}

		.container .right_ball{
			right:0px;
			background: pink;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="left_ball">左球</div>
	<div class="right_ball">右球</div>
</div>
</body>
<script type="text/javascript" src="semantic/js/jquery.min.js"></script>
<script type="text/javascript">

function left(){
	if($(this).scrollTop() <= 128 && $(this).scrollTop() > 64){
		$(".left_ball").animate({left:'448px',top:'640px'},'fast',function(){
				$(this).stop().fadeOut(500);
				if($(window).scrollTop() <= 64 && $(window).scrollTop() >= 0){
					$(this).fadeIn(500).animate({left:'0px',top:'0px',	opacity: '1',display:'block'},
						'slow',function(){
					$(this).stop(false,true);
					$(this).css("display","block");
					left();
				});
			}
		});
	}
}

function right(){
	if($(this).scrollTop() <= 128 && $(this).scrollTop() > 64){
		$(".right_ball").animate({right:'448px',top:'640px'},'fast',function(){
			$(this).stop().fadeOut(500);
			if($(window).scrollTop() <= 64 && $(window).scrollTop() >= 0){
				$(this).fadeIn(500).animate({right:'0px',top:'0px',opacity: '1',display:'block'}
					,'slow',function(){
					$(this).stop(false,true);
					$(this).css("display","block");
					right();
				});
			}
		});
	}
}


$(window).scroll(function(){
	left();
	right();
});


</script>
</html>