Блог

Главная - Вопросы по программированию - Как переместить шкалу?

Как переместить шкалу?

#html #css

#HTML #css — код

Вопрос:

Я создал масштаб, показанный на изображении ниже, используя чистый HTML и CSS. Отметки в нижней части шкалы взяты из массива, который я просматриваю. Теперь мне нужна функциональность, при которой изначально столбцы будут пустыми, но когда я нажимаю, скажем, на 3, столбцы 1,2,3 должны быть заполнены желтым цветом, а круг должен переместиться на 3, подобно тому, что происходит на этом сайте, если вы прокрутите немного вниз и пройдете тест. Кто-нибудь может, пожалуйста, помочь мне достичь этого или направить меня в правильном направлении?

введите описание изображения здесь

 <div class="rating-type__bar">
          <div class="rating-type__circle"></div>

          <div class="rating-type__bar-wrapper rating-type__bar-left" *ngFor="let opt of _element.options">
              <div class="rating-type__pipe rating-type__pipe--active">
                  <div class="rating-type__pipe-pillar">
                      <span style="height: 100%; opacity: 1;" class="rating-type__pipe-pillar-bg"></span>
                  </div>
                  <div class="rating-type__pipe-text">5</div>
              </div>
              <div class="rating-type__pipe rating-type__pipe--active">
                  <div class="rating-type__pipe-pillar">
                      <span style="height: 80%; opacity: 0.8;" class="rating-type__pipe-pillar-bg"></span>
                  </div>
                  <div class="rating-type__pipe-text">4</div>
              </div>
              <div class="rating-type__pipe rating-type__pipe--active">
                  <div class="rating-type__pipe-pillar">
                      <span style="height: 60%; opacity: 0.6;" class="rating-type__pipe-pillar-bg"></span>
                  </div>
                  <div class="rating-type__pipe-text">3</div>
              </div>
              <div class="rating-type__pipe rating-type__pipe--active">
                  <div class="rating-type__pipe-pillar">
                      <span style="height: 40%; opacity: 0.4;" class="rating-type__pipe-pillar-bg"></span>
                  </div>
                  <div class="rating-type__pipe-text">2</div>
              </div>
              <div class="rating-type__pipe rating-type__pipe--active">
                  <div class="rating-type__pipe-pillar">
                      <span style="height: 20%; opacity: 0.2;" class="rating-type__pipe-pillar-bg"></span>
                  </div>
                  <div class="rating-type__pipe-text">1</div>
              </div>
          </div>
          <div class="rating-type__bar-wrapper rating-type__bar-center">
              <div class="rating-type__pipe rating-type__pipe--active">
                  <div class="rating-type__pipe-pillar">
                      <span style="height: 10%; opacity: 0.1;" class="rating-type__pipe-pillar-bg"></span>
                  </div>
                  <div class="rating-type__pipe-text">0</div>
              </div>
          </div>
          <div class="rating-type__bar-wrapper rating-type__bar-right">
              <div class="rating-type__pipe rating-type__pipe--active">
                  <div class="rating-type__pipe-pillar">
                      <span style="height: 20%; opacity: 0.2;" class="rating-type__pipe-pillar-bg"></span>
                  </div>
                  <div class="rating-type__pipe-text">1</div>
              </div>
              <div class="rating-type__pipe rating-type__pipe--active">
                  <div class="rating-type__pipe-pillar">
                      <span style="height: 40%; opacity: 0.4;" class="rating-type__pipe-pillar-bg"></span>
                  </div>
                  <div class="rating-type__pipe-text">2</div>
              </div>
              <div class="rating-type__pipe rating-type__pipe--active">
                  <div class="rating-type__pipe-pillar">
                      <span style="height: 60%; opacity: 0.6;" class="rating-type__pipe-pillar-bg"></span>
                  </div>
                  <div class="rating-type__pipe-text">3</div>
              </div>
              <div class="rating-type__pipe rating-type__pipe--active">
                  <div class="rating-type__pipe-pillar">
                      <span style="height: 80%; opacity: 0.8;" class="rating-type__pipe-pillar-bg"></span>
                  </div>
                  <div class="rating-type__pipe-text">4</div>
              </div>
              <div class="rating-type__pipe rating-type__pipe--active">
                  <div class="rating-type__pipe-pillar">
                      <span style="height: 100%; opacity: 1;" class="rating-type__pipe-pillar-bg"></span>
                  </div>
                  <div class="rating-type__pipe-text">5</div>
              </div>
          </div>
      </div>

Комментарии:

1. Вы должны предоставить свой код, чтобы кто-то мог рассказать, как вы реализовали эту шкалу. Изображения недостаточно.

2. CSS также был бы полезен для упрощения воспроизведения

3. Если вы хотите реализовать что-то вроде этой диаграммы, я думаю, вы на неверном пути. Это просто фон с изменяемым размером наложения. Подробнее: Есть 2 слоя, серые полосы внизу и цветные сверху. Событие мыши изменит размер верхнего элемента.

Ответ №1:

Не могу ответить на этот вопрос, но я потратил на это около часа, так что я мог бы также поделиться своим прогрессом:

 "use strict";

const bars = document.getElementsByClassName("bar"),
  barCovers = document.getElementsByClassName("bar-cover");
for (let i = 5; i > -6; i--) {
  const bar = bars[Math.abs(i - 5)];
  bar.style.left = Math.abs(i - 5) * 20   40   "px";
  bar.style.height = (Math.abs(i)   1) * 7   "px";
  
  const barCover = barCovers[Math.abs(i - 5)];
  barCover.style.left = Math.abs(i - 5) * 20   40   "px";
  barCover.style.height = (Math.abs(i)   1) * 7   "px";
  barCover.style.backgroundColor = "#d5e312";
  //barCover.style.width = "0px";
  //barCover.style.display = "none";
}

const slider = document.getElementById("slider");
slider.style.position = "absolute";
slider.style.left = "37px";
slider.style.width = "218px";
slider.style.bottom = "150px";

setInterval(() => {
  const middleBar = barCovers[5];
  if (slider.value < 50) {
    const width =
      (Math.abs(slider.value - 50) < 5
        ? Math.abs(slider.value - 50)
        : 4) * 2;
    middleBar.style.width = width   "px";
    middleBar.style.left = 148 - width   "px";
      
  } else if (slider.value > 50) {
    middleBar.style.left = "148px";
    middleBar.style.width =
      (slider.value - 50 < 5
        ? slider.value - 50
        : 4) * 2   "px";
  } else {
    middleBar.style.width = "0px";
  }
  
  /*for (let i = 5; i > -6; i--) {
    if (i !== 0) {
      const barCover = barCovers[Math.abs(i - 5)];
      if (slider.value - 50 < -i * 7 amp;amp; i > 0) {
        const width =
          (Math.abs(slider.value - 50) - i * 6.8 < 17
            ? Math.abs(slider.value - 50) - i * 6.8
            : 16);
        barCover.style.width = width   "px";
        barCover.style.left = 155 - i * 19.5 - width   "px";
      } else {
        barCover.style.width = "0px";
      }
    }
  }*/
  for (let i = 5; i > -6; i--) {
    if (i !== 0) {
      const barCover = barCovers[Math.abs(i - 5)];
      if (slider.value - 50 < -i * 7) {
        barCover.style.display = "block";
      } else {
        barCover.style.display = "none";
      }
    }
  }
}, 50); 
 body, html {
  border: none;
  margin: 0px;
}

.temp {
  position: absolute;
  width: 6px;
  height: 10px;
  bottom: 100px;
  border-radius: 3px;
  background-color: #000000;
}

.bar, .bar-cover {
  position: absolute;
  width: 16px;
  bottom: 100px;
  background-color: #000000;
}

#slider {
  background: #000000;
} 
 <div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar-cover"></div>
<div class="bar-cover"></div>
<div class="bar-cover"></div>
<div class="bar-cover"></div>
<div class="bar-cover"></div>
<div class="bar-cover"></div>
<div class="bar-cover"></div>
<div class="bar-cover"></div>
<div class="bar-cover"></div>
<div class="bar-cover"></div>
<div class="bar-cover"></div>
<input type="range" id="slider"/>