js 小球运动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js 小球运动效果</title>
    </head>
    <style>
        *{
     
     padding: 0;margin: 0;}
        .ball{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-top: 10px;
        }
        .ball1{
     
     background: red;}
        .ball2{
     
     background: yellow;}
        .ball3{
     
     background: green;}
    </style>
    <body>
        <div class="ball ball1"style="margin-left: 10px;"></div>
        <div class="ball ball2" style="margin-left: 10px;"></div>
        <div class="ball ball3"style="margin-left: 10px;"></div>
    </body>
    <script>
    window.onload = function(){
     
      
        var ball1 = document.querySelector('.ball1');
        var ball2 = document.querySelector('.ball2');
        var ball3 = document.querySelector('.ball3');
        function animate1(ball,distance,cb){
     
     
            setTimeout(function(){
     
     
                var marginLeft =  parseInt(ball.style.marginLeft);  //转换为数字
                if(marginLeft == distance){
                    cb&&cb();
                }else{
                    if(marginLeft<distance){
                        marginLeft++;
                    }else{
                        marginLeft--;
                    }
                    ball.style.marginLeft = marginLeft+'px';  //转回来
                    animate1(ball,distance,cb);   
                }
            },13);
        }

        animate1(ball1,800,function(){
     
     
            animate1(ball2,600,function(){
     
     
                animate1(ball3,500,function(){
     
     
                    animate1(ball3,300,function(){
     
     
                        animate1(ball2,300,function(){
     
     
                            animate1(ball1,300,function(){
     
     

                            });
                        });
                    });
                });
            });
        });
    }
    </script>
</html>
猜你喜欢
