JavaScript实现狂欢舞动的小球

狂欢舞动的小球效果（也就一个html代码）：
代码（html）：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动的小球</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body,html{
            height: 100%;
            background-color: navajowhite;
        }
        body{
            position: relative;
        }
        div{
            border-radius: 50%;
            position: absolute;
        }

    </style>
</head>
<body>
<script>
    //页面有20个小球
    for(var i=0;i<20;i++){
        creatRandomBall(document.body);
    }
    /*
    * div 是要让他成每个div都会镜面反弹
    * 这个函数的作用就是实现单个div的镜面反弹效果
    * */
    function move(div) {
    //div所需的最大left和最大top的值
        var maxleft = div.parentElement.offsetWidth - div.offsetWidth;
        console.log(div.parentElement.offsetWidth);
        var maxtop = div.parentElement.offsetHeight - div.offsetHeight;
        var directionX = 1;
        var directionY = 1;
        var speedX = randomNum(1,5);
        var speedY = randomNum(1,5);

        setTimeout(function step() {
            //设置移动的属性
            div.style.left = div.offsetLeft + speedX * directionX+"px";
            div.style.top = div.offsetTop + speedY * directionY+"px";
            console.log(div.style.left);
            //判断碰到两头边缘改变direction的值
            //这里div.offsetLeft <= 0要小于等于0，找了一个多小时，好心痛啊
            if(div.offsetLeft >= maxleft || div.offsetLeft <= 0){
                directionX *= -1;
            }
            if(div.offsetTop >= maxtop || div.offsetTop <= 0){
                directionY *= -1;
            }

            setTimeout(step,10);
        },0);
    }
    /*
    * 创建一个元素，随机位置，随机颜色，随机宽高
    * 然后把他传给指定的父容器
    * */
    function creatRandomBall(parent) {
        var div = document.createElement("div");
        var wh = randomNum(5,120);
        div.style.width = wh+"px";
        div.style.height = wh+"px";

        div.style.left = randomNum(0,parent.offsetWidth - wh)+"px";
        div.style.top = randomNum(0,parent.offsetHeight - wh)+"px";
        div.style.backgroundColor = "rgba("+randomNum(0,255)+","+randomNum(0,255)+","+randomNum(0,255)+","+Math.random()+")";
        parent.appendChild(div);
        move(div);
    }
    /*随机函数最后是+n */
    function randomNum(n,m) {
        return parseInt(Math.random()*(m-n+1)+n);
    }
</script>
</body>
</html>
JavaScript实现狂欢舞动的小球

猜你喜欢
