javascript之如何用css、javascript围绕一个圆圈创建圆圈

hnrainll 阅读：1313 2023-11-05 18:46:41 评论：0

我想创建一个被其他圆圈包围的圆圈(没有任何动画)，如下所示:

但我想构建一个 phonegap 应用程序，所以我不想将文件大小增加到很大。

有人知道插件/方法或任何其他解决方案吗？

我在互联网上搜索过，但我找到的方法是将我的文件的大小增加得太大。

请您参考如下方法:

没有人解决这个问题的 javascript 方面。下面是一个完整的(尽管快速和肮脏的)网页，它将使用 html、css3 和 javascript 在父圆的中心周围绘制 6 个完美间隔的圆；它使用纯 javascript，因此无需引用 jquery 库。您应该能够看到如何轻松地从代码中提取方法来控制卫星圈的数量、它们与父级圆心的距离、父级和卫星半径、卫星偏移等:

var div = 360 / 6; 
var radius = 150; 
var parentdiv = document.getElementById('parentdiv'); 
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square 
var offsetToChildCenter = 20; 
var totalOffset = offsetToParentCenter - offsetToChildCenter; 
for (var i = 1; i <= 6; ++i) { 
  var childdiv = document.createElement('div'); 
  childdiv.className = 'div2'; 
  childdiv.style.position = 'absolute'; 
  var y = Math.sin((div * i) * (Math.PI / 180)) * radius; 
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius; 
  childdiv.style.top = (y + totalOffset).toString() + "px"; 
  childdiv.style.left = (x + totalOffset).toString() + "px"; 
  parentdiv.appendChild(childdiv); 
}

#parentdiv { 
  position: relative; 
  width: 150px; 
  height: 150px; 
  background-color: #ac5; 
  border-radius: 150px; 
  margin: 150px; 
} 
 
.div2 { 
  position: absolute; 
  width: 40px; 
  height: 40px; 
  background-color: #ac5; 
  border-radius: 100px; 
}

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
  <title></title> 
</head> 
 
<body> 
  <div id="parentdiv"></div> 
</body> 
 
</html>

标签:JavaScript

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。