<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> </title> <style
type="text/css"> * { margin: 0; padding: 0; } html,body { height: 100%; overflow
: hidden; } .box { position: absolute; left:0; top:0; width: 20px; height: 20px;
background: darkcyan; border-radius: 50%; } .lineX { position: absolute; left:0;
right: 0; top: 434px; height: 1px; background: black; } .lineY { position:
absolute; top:0; bottom: 0; left: 800px; width: 1px; background: black; } </
style> <script> window.onload=function(){ var
boxs=document.getElementsByClassName("box"); var rad1=200;//y方向的半径 var rad2=500;
//x方向的半径 for(var i=0;i<boxs.length;i++){ boxs[i].degree=i*90;//设置初始target值
//闭包函数 使i成为局部变量 (function(i){ setInterval(function(){ var x=Math
.cos(boxs[i].degree*(Math.PI/180)); var y=Math.sin(boxs[i].degree*(Math.PI/180
)); boxs[i].style.left=rad2*x+740+"px"; boxs[i].style.top=rad1*y+375+"px";
boxs[i].style.width=boxs[i].style.height=(rad1*y+424)*0.3+"px"; boxs[i].degree+=
3; },30) })(i); } } </script> </head> <body> <div class="box"></div> <div class=
"box" style="background:red"></div> <div class="box" style="background:black"></
div> <div class="box" style="background:yellow"></div> <div class="lineX"> </div
> <div class="lineY"> </div> </body> </html>

技术
©2019-2020 Toolsou All rights reserved,
java中的编译时异常和运行时异常[work] python读取txt文件最后一行11-5 指定位置输出字符串Thread.getContextClassLoader与Thread.getClassLoader()区别使用mt-range实现一个数字随着滑动杆变化的效果Mybatis映射文件Mapper.xml中#和$的区别Fiddler模拟请求发送和修改响应数据mysql 递归查找父类的所有子节点JAVA 把字符串转换成数字类型Vue + Element-ui的下拉框el-select获取额外参数