animate 发布html,animate.html

animate

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

原始数据

按行查看

历史