在页面显示任意多个球球来回弹,依据移动式广告弹窗改进。

移动式弹窗广告

//物体碰边改变方向的方法
    function boxMove(ele) {
    
    
    	
        var top = parseInt(getStyles(ele).top);//得到元素的最终的top值
        var left = parseInt(getStyles(ele).left);//得到元素的最终left值

        var offsetHeight = ele.offsetHeight;//元素自身的高度
        var offsetWidth = ele.offsetWidth;//元素自身的宽度

        var clientHeight = document.documentElement.clientHeight;//窗口的高度
        var clientWidth = document.documentElement.clientWidth;//窗口的宽度

        var y = clientHeight - offsetHeight;//元素在Y轴上移动的最大的距离
        var x = clientWidth - offsetWidth;//元素在X轴上移动的最大的距离

        if (top >= y) {
    
    //超过可以移动的最大距离就改变移动的方向
            if (ele.speedX > 0) {
    
    
                ele.speedX *= -1;
            }
        }
        if (top < 0) {
    
    //超过可以移动的最最小距离就改变移动的方向
            ele.speedX *= -1;
        }
        top += ele.speedX;
        if (left >= x) {
    
    //超过可以移动的最大距离就改变移动的方向
            if (ele.speedY > 0) {
    
    
                ele.speedY *= -1;
            }
        }
        if (left < 0) {
    
    //超过可以移动的最最小距离就改变移动的方向
            ele.speedY *= -1;
        }
        left += ele.speedY;
        ele.style.top = top + 'px';
        ele.style.left = left + 'px';
    }
    var colorStrArr=["1","2","3","4","5","6","7","8","9","10","A","B","C","D","E","F"];//颜色的取值范围。
    const BALL_NUMBER=20;//球的数量
    const MIN_BALL_WIDTH=140;//球的最小直径
    const MAX_BALL_WIDTH=200;//球的最大直径
    const START_DRESS=0;//球的起始位置
    const MIN_SPEED=3;//球的最小运动速度
    const MAX_SPEED=12;//球的最大运动速度
    const COLOR_NUMBER=6;//颜色的16进制的个数

    creatBall();

    //创建球球的方法
    function creatBall() {
    
    
        for (let i = 0; i < BALL_NUMBER; i++) {
    
    //循环生成球球病随机给球球颜色和大小
            //生成随机大小的球球
            var wh = random(MIN_BALL_WIDTH, MAX_BALL_WIDTH);
            var ball = createDiv(START_DRESS, START_DRESS, wh, wh);
            
            //随机生成球球的速度
            ball.speedX = random(MIN_SPEED,MAX_SPEED);
            ball.speedY = random(MIN_SPEED,MAX_SPEED);

            var bgColor='';
            for (let j = 0; j < COLOR_NUMBER; j++) {
    
    
                bgColor+=colorStrArr[random(0,colorStrArr.length)];
            }
            ball.style.backgroundColor="#"+bgColor;
            document.body.appendChild(ball);
            setInterval(boxMove, INTERVAL, ball);
        }
    }

注意:1.这里boxMove方法中的getStyles(ele)方法需要自己写一个得到元素的最终样式的方法就可以了,注意兼容性。

2.creatBall方法中的random方法需要写一个求任意范围的随机数方法,还有一个createDiv也是需要自己写一个在页面任意位置创建任意宽高的方法!

猜你喜欢

转载自blog.csdn.net/weixin_42965828/article/details/112792920