<!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,
Unity-Demo实例之 ✨ 实现UI-背包装备拖拽功能计算机网络---计算机网络基本概念(协议、体系)某东14薪变16薪,是诚意还是套路?让人意想不到的Python之樱花树(turtle库的华丽样式)java四大函数式接口(重点,简单)06【若依框架解读】数据范围过滤--太牛了Unity3D之UGUI基础--画布的三种模式os模块的简单使用html写樱花树,写樱花树的作文