共同学习,能理解代码的点个赞,从新学习原声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 id="canvas"> <!-- 中间的圆圈 --> <div class="ball ball_center"></div> <!-- 运动的8个小圆圈 --> <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> <script> var ball = document.getElementsByClassName("ball"); var cile = document.getElementsByClassName("cile"); var times = 100; var step_tag = true; var timeTag = 12; var asyn_tag = true; if(asyn_tag) { times = times / 10; } 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 ball_animate_asyn() { if(timeTag > -2) { ball_animate(ball_index); timeTag--; } else { if(ball_index < 8) { ball_index++; timeTag = 12; } else { step_tag = false; cile[0].setAttribute("style", "display:block;"); } } } 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 回复