这一篇文章是上一篇文章的升级版本，同时实现多个小球从同一位置出发在屏幕中滚动

样式：

<style type="text/css">

        *{margin:0;padding:0;}

        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}

        a{text-decoration:none;}

        img{border:none;}

        ol,ul{list-style:none;}

        .ball{

            position: absolute;

            left: 0;

            top: 0;

            width: 80px;

            height: 80px;

            background: -webkit-radial-gradient(rgb(225,225,225),rgb(225,0,0));

            border-radius: 50%;

        }

    </style>

定义的小球：

无

执行的方法：

<script>

        run(10);

        function run(num){

            for(var i = 0; i < num; i ++){

                var oDiv = document.createElement("div");//创建div

                oDiv.className = "ball";

                oDiv.style.background = randomColor();

                //定义每一个小球的变化量

                oDiv.leftVal = 3 + i;

                oDiv.topVal = 3 + i;

                document.body.appendChild(oDiv);//添加元素

            };

            var aBall = document.querySelectorAll(".ball");//获取的是集合

            //获取小球的活动范围 最大宽 高

            var maxW = document.documentElement.clientWidth - aBall[0].clientWidth;

            var maxH = document.documentElement.clientHeight - aBall[0].clientHeight;

            //实时计算窗口的大小

            window.onresize = function (){

                maxW = document.documentElement.clientWidth - aBall[0].clientWidth;

                maxH = document.documentElement.clientHeight - aBall[0].clientHeight;

            };

            play();

            function play(){

                for(var i = 0; i < num; i++){

                    var oBall = aBall[i];

                    //获取每一个小球的 left top值

                    var sLeft = oBall.offsetLeft;

                    var sTop = oBall.offsetTop;

                    //改变每一个小球的left top值

                    var left = sLeft + oBall.leftVal;

                    var top = sTop + oBall.topVal;

                    //判断left是否大于最大值,是否碰撞右边边界

                    if(left >= maxW || left <= 0){

                        left = Math.min(left,maxW);

                        left = Math.max(left,0);

                        oBall.leftVal = -oBall.leftVal;

                        oBall.style.background = randomColor();

                    };

                    if(top >= maxH || top <= 0){

                        top = Math.min(top,maxH);

                        top = Math.max(top,0);

                        oBall.topVal = -oBall.topVal;

                        oBall.style.background = randomColor();

                    };

                    oBall.style.left = left + "px";

                    oBall.style.top = top + "px";

                };

            };

            setInterval(play,13);

        };

        //随机颜色

        function randomColor(){

            //[0,255]

            var r = Math.floor(Math.random()*256);

            var g = Math.floor(Math.random()*256);

            var b = Math.floor(Math.random()*256);

            return "-webkit-radial-gradient(rgb(225,225,225),rgb("+r+","+g+","+b+"))";

        };    

    </script>



项目展示：多个运动的小球

著作权归作者所有。 
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：付博瀚
来源：付博瀚个人博客
链接: https://www.fubohan.cn/