Js/jQuery - 此代码将大小设置为变量，有什么方法可以使其响应？

Question

这里是非程序员，正在寻求帮助。 :) 我一直在寻找一种方法，让两个圆圈以一种非常特殊的方式在一个更大的圆圈内旋转，我发现 some code 我设法调整它以获得我想要的效果：

然而，它的全宽是 400px（我需要它是这样），问题是代码定义了绝对的半径和定位值，所以如果浏览器宽度低于 400px，它可以待调整：

var r = 101;
var xcenter = 100;
var ycenter = 100;
var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
var newTop = Math.floor(ycenter + (r * Math.sin(t)));

现在，如果我可以简单地将整个内容针对 < 400px 的浏览器缩小到

，我会很满足

var r = 71;
var xcenter = 70;
var ycenter = 70;
var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
var newTop = Math.floor(ycenter + (r * Math.sin(t)));

但我对如何实现这种响应性一无所知，或者即使可以实时实现（无需刷新浏览器，因为我希望它能够防调整大小).

这是我所拥有的全部 fiddle：http://jsfiddle.net/29or8u76/3/

所以...有人可以帮助我吗？因为我根本不会说 javascript :) Thanksss！

Answer 1

这并没有直接回答您的问题，但这是一个仅使用 CSS.
的示例我使用百分比来保持一切对容器宽度的响应。

内圈围绕 origins by using animation, which uses transform 旋转。

外圈的脉动仅用于演示目的，以显示内圈的大小相对于容器的大小。

#container {
  position: relative;
  height: 0;
  border: 1px solid #000;
  border-radius: 50%;
  margin: 0 auto;
  animation: pulse 5s 0s linear infinite;
}

.circle {
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  animation: spin 3s 0s linear infinite;
}

#blue {
  top: 0;
  left: 25%;
  transform-origin: center bottom;
  background-color: #00f;
}

#red {
  bottom: 0;
  left: 25%;
  transform-origin: center top;
  background-color: #f00;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    width: 25%;
    padding-bottom: 25%;
  }
  50% {
    width: 10%;
    padding-bottom: 10%;
  }
  100% {
    width: 25%;
    padding-bottom: 25%;
  }
}

<div id="container">
  <div class="circle" id="blue"></div>
  <div class="circle" id="red"></div>
</div>

编辑：

为了确保圆圈的内容不旋转，我使用了一种稍微不同的方法来为围绕容器中心的轨道上的圆圈设置动画。

此方法基于a tutorial by Zoltan Howryluk。

#container {
  position: relative;
  height: 0;
  border: 1px solid #000;
  border-radius: 50%;
  margin: 0 auto;
  animation: pulse 5s 0s linear infinite;
}

.circle {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
  border-radius: 50%;
  transform-origin: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle span {
  font-size: 10px;
  color: white;
}

#blue {
  background-color: #00f;
  transform: translateY(-50%);
  animation: orbit1 3s 0s linear infinite;
}

#red {
  background-color: #f00;
  transform: translateY(50%);
  animation: orbit2 3s 0s linear infinite;
}

@keyframes orbit1 {
  from {
    transform: rotate(0deg) translateX(50%) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(50%) rotate(-360deg);
  }
}

@keyframes orbit2 {
  from {
    transform: rotate(0deg) translateX(-50%) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(-50%) rotate(-360deg);
  }
}

@keyframes pulse {
  0% {
    width: 25%;
    padding-bottom: 25%;
  }
  50% {
    width: 10%;
    padding-bottom: 10%;
  }
  100% {
    width: 25%;
    padding-bottom: 25%;
  }
}

<div id="container">
  <div class="circle" id="blue"><span>BLUE</span></div>
  <div class="circle" id="red"><span>RED</span></div>
</div>

在决定使用此方法之前，我建议考虑 browser compatibility and vendor prefixes 的各种 CSS3 功能。为简单起见，我没有在此处包含任何供应商前缀。

Js/jQuery - 此代码将大小设置为变量，有什么方法可以使其响应？

Js/jQuery - This code sets a size to a variable, any way to make it responsive?

javascript

jquery

responsive