JavaScript【代码】如何在一个圆上生成按钮

最新推荐文章于 2022-07-08 09:26:03 发布

张冰庭

最新推荐文章于 2022-07-08 09:26:03 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： js javascript 脚本

本文链接：https://blog.csdn.net/u010841622/article/details/33732793

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

</head>
<div style="width:1024px; height:720px; margin:auto auto; text-align:center; border:#CCC 1px solid;">
  <div style="position:relative;">
    <input type="button" src="images/bg2_03.jpg" value="中心介绍" id="button1" style="position:absolute;">
    <input type="button" src="images/bg2_05.jpg" value="数据查询" id="button2" style="position:absolute;"><br>
    <input type="button" src="images/bg2_10.jpg" value="平面导览" id="button3" style="position:absolute;">
    <input type="button" src="images/bg2_13.jpg" value="历史资料" id="button4" style="position:absolute;"><br>
    <input type="button" src="images/bg2_18.jpg" value="办事流程" id="button5" style="position:absolute;">
    <input type="button" src="images/bg2_21.jpg" value="公益日历" id="button6" style="position:absolute;"><br>
    <input type="button" src="images/bg2_26.jpg" value="再孵组织" id="button7" style="position:absolute;">
    <input type="button" src="images/bg2_29.jpg" value="义工募集" id="button8" style="position:absolute;"><br>
    <input type="button" src="images/bg2_34.jpg" value="公益名人" id="button9" style="position:absolute;">
    <input type="button" src="images/bg2_36.jpg" value="领导关怀" id="button10" style="position:absolute;">
  </div>
</div>
    <script type="text/javascript">
	  var width = 1024;
	  var height = 720;
	  var circleCenterX = width / 2 - 30;
	  var circleCenterY = height / 2 - 10;
	  var circleCenterR = 100;
	  var y = circleCenterR / 3;
	  var max = 5;
	  
	  for (var temp=1; temp<=max; temp++) {
		  //以圆心为远点的笛卡尔坐标系中坐标
		  var y1 = y * (temp%3);
		  var x1 = Math.sqrt((circleCenterR * circleCenterR) - (y1 * y1));
		  
		  //实际的坐标, 分别为按钮1、按钮2,同一排y轴相等，所以只设一个y轴变量
		  var y11;
		  var x11 = circleCenterX - x1;
		  var x22 = circleCenterX + x1;
		  
		  if (temp <= (max+1)/2) {
			  y11 = circleCenterY - y1;
		  } else {
			  y11 = circleCenterY + y1;
		  }
		  
		  //改变坐标，每次改同一排上的两个按钮
		  var button1 = document.getElementById("button"+(temp*2-1));
		  button1.style.left = x11 + "px";
		  button1.style.top = y11 + "px";
		  var button2 = document.getElementById("button"+(temp*2));
		  button2.style.left = x22 + "px";
		  button2.style.top = y11 + "px";
	  }
	  
  </script>
<body>
</body>
</html>

修改圆半径，可以改变圆的大小，效果图

张冰庭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript【代码】如何在一个圆上生成按钮

无标题文档 var width = 1024; var height = 720; var circleCenterX = width / 2 - 30; var circleCenterY = height / 2 - 10; var c
复制链接

扫一扫

专栏目录