animate 发布html,animate.html
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;
}
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();
});
一键复制
编辑
Web IDE
原始数据
按行查看
历史