Js / jQuery - этот код устанавливает размер переменной, любой способ сделать его отзывчивым? - PullRequest
Новая
       8

Js / jQuery - этот код устанавливает размер переменной, любой способ сделать его отзывчивым?

0 голосов
/ 26 октября 2018

Непрограммист здесь, ищет помощь.:) Я искал способ заставить два круга вращаться внутри большего круга, очень специфическим способом, и я нашел некоторый код , который мне удалось настроить, чтобы получить именно тот эффект, который я хотел:

enter image description here

Однако его полная ширина составляет 400 пикселей (мне нужно, чтобы это было так), и проблема в том, что код определяет радиус ипозиционирование значений в абсолютных значениях, поэтому, если размер браузера меньше 400 пикселей, его нельзя изменить: 

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)));

Теперь я был бы рад, если бы я мог просто масштабировать всю эту вещь для браузеров <400 пикселей до</p> 

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)));

Но я не имею ни малейшего понятия, как реализовать эту адаптацию, или даже если это возможно сделать в режиме реального времени (без необходимости обновлять браузер, потому что я бы хотел, чтобыбыть устойчивым к изменению размера).

Вот полная скрипка того, что у меня есть: http://jsfiddle.net/29or8u76/3/

Итак ... кто-нибудь может мне помочь?Потому что я вообще не говорю на javascript :) Спасибо!

1 Ответ

0 голосов
/ 26 октября 2018

Это прямо не отвечает на ваш вопрос, но вот пример, использующий только CSS.
Я использовал проценты, чтобы все реагировало на ширину контейнера.

Внутренние круги вращаются вокруг своих происхождение с использованием анимации , которая использует 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>

РЕДАКТИРОВАТЬ:

Чтобы убедиться, что содержимое кругов не вращается, яМы использовали немного другой метод, который анимирует круги на орбите вокруг центра контейнера.

Этот метод основан на учебном пособии Золтана Хоурылука . 

#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>

Прежде чем выбрать этот метод, я рекомендую рассмотреть совместимость браузера и префиксы вендора для различных функций CSS3.Для простоты я не включил здесь префиксы поставщиков.

...