文章 - 炫酷的球球 | 前端网（QDFuns）

共同学习，能理解代码的点个赞，从新学习原声js，新练习

html 代码

<!DOCTYPE HTML>
<html>
    <head>
        <title>转动的球球</title>
        <style>
            /*  
    定义body的父元素HTML为满屏大小，同时设置溢出隐藏防止出现滚动条 
*/
html{
    height:100%;
    overflow:hidden;
}
/*  
    只有这样才能设置body的高度为100%，因为：若父元素未指定高度，子元素则无法使用百分比订制高度 
    使用flex弹性布局，水平和垂直居中
*/
body{
    background:#000;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}
/*
    设置画布，定义我们将球放在什么位置，这里需要设计其未相对定位的其实参照，才能让后续的球有参照性定位 
 */

#canvas{
    width:400px;
    height:400px;
    position:relative;
}
/*
    画出8个球，这里我们没有使用canvas所以使用圆角来画球，对其进行定位，初期我们就定位在中间
 */
.ball{
    position:absolute;
    width:60px;
    height:60px;
    border-radius:50%;
    top:170px;
    left:170px;
    z-index:2;
}
/*
    中间的球设计相对大一些
 */
.ball_center{
    width:80px;
    height:80px;
    top:160px;
    left:160px;
    background:red;
    z-index:3;
}
/*
    为每一个小球设置一个颜色，这样视觉效果会更美
*/
.color_1{
    background:#FFFF80;
}
.color_2{
    background:#80FF80;
}
.color_3{
    background:#FF80C0;
}
.color_4{
    background:#00FF40;
}
.color_5{
    background:#FF0080;
}
.color_6{
    background:#0080FF;
}
.color_7{
    background:#8000FF;
}
.color_8{
    background:#FF8000;
}
/*
    当第一次动画执行完毕以后，需要显示的动画
*/
.cile{
    position:absolute;
    width:340px;
    height:340px;
    border-radius:50%;
    left:30px;
    top:30px;
    border:2px dashed #ccc;
    z-index:1;
    display:none;
}

</style>

</head>

<body>

<div class="ball ball_center"></div>
            
            <div class="ball color_1"></div>
            <div class="ball color_2"></div>
            <div class="ball color_3"></div>
            <div class="ball color_4"></div>
            <div class="ball color_5"></div>
            <div class="ball color_6"></div>
            <div class="ball color_7"></div>
            <div class="ball color_8"></div>
            
            <div class="cile"></div>

</div>

</body>

function ball_animate(index) {
        var ball_one = ball[index];//The positioning of a circular ball   循环小球的css 定位    不是以圆的形状出来的，是用正方形的位置来排小球的位置
        switch(index) {
            case 1: 
                ball_one.setAttribute("style","top:"+parseFloat(ball_one.offsetTop-14.14)+"px;"); 
                break;
            case 5:
                ball_one.setAttribute("style","top:"+parseFloat(ball_one.offsetTop+14.14)+"px;"); 
                break;
            case 3:
                ball_one.setAttribute("style","left:"+parseFloat(ball_one.offsetLeft+14.14)+"px;"); 
                break;
            case 7:
                ball_one.setAttribute("style","left:"+parseFloat(ball_one.offsetLeft-14.14)+"px;"); 
                break;
            case 2:
                ball_one.setAttribute("style","top:"+parseFloat(ball_one.offsetTop-10)+"px;"+"left:"+parseFloat(ball_one.offsetLeft+10)+"px"); 
                break;
            case 4:
                ball_one.setAttribute("style","top:"+parseFloat(ball_one.offsetTop+10)+"px;"+"left:"+parseFloat(ball_one.offsetLeft+10)+"px"); 
                break;
            case 6:
                ball_one.setAttribute("style","top:"+parseFloat(ball_one.offsetTop+10)+"px;"+"left:"+parseFloat(ball_one.offsetLeft-10)+"px"); 
                break;
            case 8:
                ball_one.setAttribute("style","top:"+parseFloat(ball_one.offsetTop-10)+"px;"+"left:"+parseFloat(ball_one.offsetLeft-10)+"px"); 
                break;
            default:
                break;
        }
    }

function ball_animate_sync(){

for(let i = 0; i < 9; i++) {
            ball_anmate(i);
            if(i == 8) {
                if(timeTag < 0) {
                    step_tag = false;
                    cile[0].setAttribute("style", "display:block;");
                }
            } else {
                timeTag--;
            }
        }
    }
    var ball_index = 1;

function getStyle(obj){
        if(obj.currentStyle){
            return obj.currentStyle['opacity'];
        }else{
            return getComputedStyle(obj,null)['opacity'];
        }
    }

//设计工具函数设置元素的css透明度的值
    function setStyle(obj,val){
        //IE低版本浏览器兼容设置
        if(obj.currentStyle){
            obj.style.filter = "alpha(opacity="+parseInt(val)+"%)";
        }else{
            obj.style.opacity = val;
        }
    }
    function my_animate(){
        if(step_tag){
            if(asyn_tag){
                ball_animate_asyn();
            }else{
                ball_animate_sync();
            }
        }else{
            for(let i=0;i<9;i++){
                var ball_one =ball[i];
                setStyle(ball_one,Math.random());
            }
        }
    }

var animateStep = setInterval(my_animate,times);

</script>

</html>

炫酷的球球

评论 ( 0 )

最新评论

暂无评论

炫酷的球球

评论 ( 0 )

最新评论

暂无评论

欢迎您回来

创建账号

找回密码