js 小球运动

来源：互联网发布：无人机遥控软件编辑：程序博客网时间：2024/05/18 16:18
<!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>
阅读全文
0 0