建立一个双环圆

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jq/jquery-3.2.1.js"></script>
		<style>
			div{width: 2px;height: 2px;background: black;
			position: absolute;}
		</style>
	</head>
	<body>
		<script>
			var a = 200, b = 200, r = 90,r2=70, times = 0; //a b坐标位置   r半径  r2小圆半径
			 var zou=setInterval(function flutter() {
		         times += 1;
		         var hudu = (2*Math.PI / 360) * times;  //(1单位的弧度)*单位数
		         console.log(2*Math.PI / 360)
		         var X = a + Math.sin(hudu) * r;    //单位sin值*半径
		         var Y = b - Math.cos(hudu) * r;    //  注意此处是“-”号,因为我们要得到的Y是相对于(0,0)而言的。
		         
		         
		         
		         $("body").append('<div style="position:absolute; left:'+X+'px; top:'+Y+'px; width:1px; height:1px; background:#00F;"></div>');
		         setTimeout(function(){
		         	var Z = a + Math.sin(hudu) * r2;
		            var W = b - Math.cos(hudu) * r2; 
		         	$("body").append('<div style="position:absolute; left:'+Z+'px; top:'+W+'px; width:1px; height:1px; background:#00F;"></div>');
		         },300)
		         
		         if(times == 360){
		             clearInterval(zou)
		         }
		     }, 10);
		</script>
	</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值