jquery-圆点围绕的圆形

制作一个用jquery为基础的圆点围绕的圆形

效果图

在这里插入图片描述

css样式

.container {
	position: relative;
	width: 168px;
	height: 168px;
	margin: 350px auto;
	border: 1px solid green;
	border-radius: 50%;
}

.box {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: red;
	position: absolute;
}

.dot {
	position: absolute;
	width: 8px;
	height: 9px;
	background: blue;

}

jquery

         $(function() {
			//中心点横坐标
			var dotLeft = ($(".container").width() - $(".dot").width()) / 2;
			
			//中心点纵坐标
			var dotTop = ($(".container").height() - $(".dot").height()) / 2;
			
			//起始角度
			var stard = 0;
			
			//半径
			var radius = 84;  //圆宽度的一半
			
			//每一个BOX对应的角度;
			var avd = 360 / $(".box").length;

			//每一个BOX对应的弧度;
			var ahd = avd * Math.PI / 180;

			//设置圆的中心点的位置
			$(".dot").css({
				"left": dotLeft,
				"top": dotTop
			});
			$(".box").each(function(index, element) {
				$(this).css({
					"left": Math.sin((ahd * index)) * radius + dotLeft,
					"top": Math.cos((ahd * index)) * radius + dotTop
				});
                console.log(Math.sin((ahd * index)) * radius + dotLeft);
                console.log(Math.cos((ahd * index)) * radius + dotTop);
				console.log($(".dot").width());
				console.log($(".box").length)
			})
		});
        <div class="container">
			<div class="dot"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="dot"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
		</div>

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页