4

Имеется следующий слайдер в виде временной шкалы:

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

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

function initProgress() {
  var activeDist = $(".slide a.active").position();
  activeDist = activeDist.left;
  $(".after").stop().animate({
    width: activeDist + "px"
  });
}
initProgress();
$("a").click(function(e) {
  e.preventDefault();
  $(".slide a").removeClass("active");
  $(this).addClass("active");
  initProgress();
});
$(window).resize(function() {
  initProgress();
});
body {
  background: royalblue;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
}

.container .before,
.container .after {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin-top: -3px;
  height: 4px;
  background: cornflowerblue;
}

.container .after {
  width: 50%;
  background: white;
}

.container:before,
.container:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  bottom: 0;
  margin-top: -3px;
  width: 44px;
  height: 4px;
  background-color: green;
}

.container:before {
  left: 0;
  background: white;
  background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
}

.container:after {
  right: 0;
  background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
}

.timeline {
  display: table;
  table-layout: fixed;
  margin-top: 60px;
  width: 100%;
}

.time {
  display: table-cell;
  text-align: center;
}

.slide a {
  display: inline-block;
  position: relative;
  width: 10px;
  height: 10px;
  border: 2px solid white;
  border-radius: 100%;
  background: royalblue;
  color: white;
  transition: 0.3s all ease;
}

.slide a.active,
.slide a:hover {
  border-color: white;
  background: white;
}

a.deactive {
  border: none;
  width: 0px;
}

.slide i {
  display: block;
  position: absolute;
  top: -40px;
  left: -12px;
  width: 30px;
  height: 30px;
  border: 2px solid white;
  border-radius: 100%;
  line-height: 30px;
  color: white;
  font-style: normal;
  font-size: 11px;
}

.slide span {
  display: none;
  opacity: 0;
  display: block;
  position: fixed;
  top: 150px;
  left: 0;
  right: 0;
  color: white;
}

a.active>i {
  background-color: white;
  color: royalblue;
}

a.active~span {
  display: block;
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="before"></div>
  <div class="after"></div>
  <div class="container__track timeline">
    <div class="slide time">
      <a class="" href=""><i>1979</i></a><span>Это 1979 год</span>
    </div>
    <div class="slide time">
      <a class="active" href=""><i>1980</i></a><span>Это 1980 год</span>
      <!-- Эту дату устанавливаем активной по умолчанию. Присваиваем класс active -->
    </div>
    <div class="slide time">
      <a href=""><i>1981</i></a><span>Это 1981 год</span>
    </div>
    <div class="slide time">
      <a class="deactive" href=""></a>
      <!-- Пропускаем дату. Просто присваиваем класс deactive (свойства смотрим в стиле). При этом все расстояния остаются верными -->
    </div>
    <div class="slide time">
      <a href=""><i>1983</i></a><span>Это 1983 год</span>
    </div>
    <div class="slide time">
      <a href=""><i>1984</i></a><span>Это 1984 год</span>
    </div>
  </div>
</div>

Приведенный код это ответ на вопрос

В ответе предложена такая схема, где каждый год определяется следующим отрезком HTML кода:

<div class="slide time">
  <a class="" href=""><i>1979</i></a><span>Это 1979 год</span>
</div>

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

a.deactive {
  border: none;
  width: 0px;
}

и этот отрезок HTML кода выглядит следующим образом:

<div class="slide time">
  <a class="deactive" href=""></a><!-- Пропускаем дату -->
</div>

Таким образом расстояние между годами мы соблюдаем и у нас ничего не нарушается.

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

<div class="slide time">
  <a class="deactive" href=""></a><!-- Пропускаем дату -->
</div>

Вопрос: Каким образом можно исключить дублирование на странице выше приведенного лишнего HTML кода, а добавлять его только в том случае, если определенную дату необходимо добавить и показать в слайдере, а с помощью JavaScript пересчитывать количество лет между датами, указанными в тегах <i>1979</i>, где взять за основу, например, 1 год равен расстоянию между датами, скажем, 40px?

2
  • Есть идея, вычитать с каждого следующего числа предыдущее, и если оно равно 1 то выполнять данный скрипт, а если больше 1, то ставить промежутки в пикселях, количество которых, равно числу которое получим умноженное на наш промежуток в пикселях. Осталось только сформулировать это в JS )))
    – vantal
    25 апр 2020 в 16:21
  • Ну да, получается что придется немного переделать и HTML/CSS. Но это уже не так сложно, с этим даже и я бы справился. У меня только не хватает знаний в JS чтобы реализовать то что описано выше
    – vantal
    25 апр 2020 в 16:41

2 ответа 2

8

const items = document.querySelectorAll('.timeline__item')
const timeline = document.querySelector('.timeline')
const slider = document.querySelector('.timeline__inner')

// чтобы при ресайзе можно было взять активный айтем
let currentTarget = null

// Получаем начальное значение
const start = items[0].dataset.year
// И конечное
const end = items[items.length - 1].dataset.year
// Получаем разницу этих значений
const difference = end - start
// Получаем ширину временной линии
let timelineWidth = timeline.getBoundingClientRect().width
// Незнаю как обозвать это, но это нужно что бы ширина айтема не влияла на распереление по таймлайну
let itemPart = items[0].getBoundingClientRect().width / difference
// И поделив её на разницу между конечным и начальным годом
// мы получим шаг(ширину) который равен одному году
let step = timelineWidth / difference - itemPart

function setItemPosition(item) {
  const itemYear = item.dataset.year
  // шаг умножаем на количество лет от начального значения
  item.style.left = step * (difference - (end - itemYear)) + 'px'
}

function getDistanceToItem(target) {
  const { left, width } = target.getBoundingClientRect()
  return left - timeline.getBoundingClientRect().left + width / 2
}

function setSliderWidth(val) {
  slider.style.width = val + 'px'
}

function pickYear(e) {
  currentTarget = e.target
  // убираем активный класс у всех элементов
  items.forEach((item) => item.classList.remove('timeline__item_picked'))
  // добавляем нажатому
  currentTarget.classList.add('timeline__item_picked')
  // получаем расстояние до выбранного айтема и изменяем ширину слайдера на это расстояние
  setSliderWidth(getDistanceToItem(currentTarget))
}

function resizehandler() {
  timelineWidth = timeline.getBoundingClientRect().width
  itemPart = items[0].getBoundingClientRect().width / difference
  step = timelineWidth / difference - itemPart
  items.forEach((item) => setItemPosition(item))
  if (currentTarget) setTimeout(() => setSliderWidth(getDistanceToItem(currentTarget)), 700)
}

items.forEach((item) => {
  setItemPosition(item)
  item.addEventListener('click', pickYear)
})

onresize = resizehandler
body {
  display: flex;
  align-items: center;
  justify-content: center;
  
  height: 100vh;
  margin: 0;
  
  background-color: black;
}

.timeline {
  position: relative;
  
  height: 2vh;
  width: 80%;
  
  display: flex;
  align-items: center;
  
  background-color: #F5F5F5;
}

.timeline__inner {
  width: 0;
  height: 100%;
  
  transition: 0.5s;
  
  background-color: #4FC3F7;
}

.timeline__item {
  position: absolute;
  
  width: calc(2vw + 2vh);
  height: calc(2vw + 2vh);
  
  display: flex;
  justify-content: center;
  
  background-color: #F5F5F5;
  border-radius: 50%;
  cursor: pointer;
  
  transition: 0.5s;
  
  z-index: 1;
}

.timeline__item__year {
  position: absolute;
  top: -150%;
  
  color: #F5F5F5;
}

.timeline__item_picked {
  background-color: #4FC3F7;
}
<div class="timeline">
  <div class="timeline__inner"></div>
  <div data-year="2000" class="timeline__item">
    <div class="timeline__item__year">2000</div>
  </div>
  <div data-year="2002" class="timeline__item">
    <div class="timeline__item__year">2002</div>
  </div>
  <div data-year="2004" class="timeline__item">
    <div class="timeline__item__year">2004</div>
  </div>
  <div data-year="2010" class="timeline__item">
    <div class="timeline__item__year">2010</div>
  </div>
  <div data-year="2018" class="timeline__item">
    <div class="timeline__item__year">2018</div>
  </div>
</div>

0
1

Не умею сокращать javascript но написал как мог

Смена слайдов происходит при клике на шарики на линии

Смотреть на весь экран

let f1 = document.querySelector(".fo1");
let f2 = document.querySelector(".fo2");
let f3 = document.querySelector(".fo3");
let f4 = document.querySelector(".fo4");
let f5 = document.querySelector(".fo5");
let f6 = document.querySelector(".fo6");
let fo = document.querySelectorAll(".fo");

function remove() {
  let fo = document.querySelectorAll(".fo").forEach(function(el) {
    el.style.width = "0px";
  })
}

c1.onclick = function() {
  marker.style.transform = "translate(5px,0)";
  line.style.width = "0px";
  remove();
  f1.style.width = "480px";
}

c2.onclick = function() {
  marker.style.transform = "translate(105px,0)";
  line.style.width = "100px";
  remove();
  f2.style.width = "480px";
}


c3.onclick = function() {
  marker.style.transform = "translate(275px,0)";
  line.style.width = "260px";
  remove();
  f3.style.width = "480px";
}


c4.onclick = function() {
  marker.style.transform = "translate(505px,0)";
  line.style.width = "500px";
  remove();
  f4.style.width = "480px";
}


c5.onclick = function() {
  marker.style.transform = "translate(735px,0)";
  line.style.width = "740px";
  remove();
  f5.style.width = "480px";
}


c6.onclick = function() {
  marker.style.transform = "translate(905px,0)";
  line.style.width = "900px";
  remove();
  f6.style.width = "480px";
}
.container {
  max-width: 960px;
  margin: auto;
}

body {
  height: 3000px;
}

.circles circle {
  cursor: pointer;
}

#marker,
#line,
.fo {
  transition: 0.34s cubic-bezier(0, 1.31, .98, -0.02);
}

text {
  font-size: 16px;
}

#g1 h3 {
  font-size: 26px;
}

#g1 p {
  font-sizze: 20px;
}
<div class="container">
  <svg viewBox="0 0 1000 400" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="100" width="900" height="6" fill="#ccc" ry="6" />
  <rect x="50" y="102" width="10" height="2" fill="#fff" ry="3" id="line"/>
  <g fill="#ccc" class="circles" id="cir">
     <circle cx="50"  cy="103" r="10" id="c1"/>
     <circle cx="150" cy="103" r="10" id="c2"/>
     <circle cx="320" cy="103" r="10" id="c3"/>
     <circle cx="550" cy="103" r="10" id="c4"/>
     <circle cx="780" cy="103" r="10" id="c5"/>
     <circle cx="950" cy="103" r="10" id="c6"/>
  </g>
    
  <g transform="translate(5,0)" fill="#ccc" id="marker">
    <circle cx="45" cy="40" r="40" class="anim">
      <animateTransform 
      attributeName="transform"
      type="translate"
      dur="0.34s"
      values="-14 0; -11 0; -8 0; -5 0;  5 0; 11 0; 14 0"
      begin="cir.click"/>
    </circle>
    <path d="M30,70 60,70 45,90z"/>
    <circle cx="45" cy="103" r="6" fill="#fff"/>
  </g>
    
  <g text-anchor="middle" fill="#fff">
    <text x="48" y="47">2002</text>
    <text x="150" y="47">2007</text>
    <text x="320" y="47">2012</text>
    <text x="550" y="47">2017</text>
    <text x="780" y="47">2019</text>
    <text x="950" y="47">2020</text>
  </g>
    
  <g>
    <foreignObject x="300" y="170" width="400px" height="200px" class="fo fo1">
       <h3>В 2002 году</h3>
       <p>
         Информационные технологии – это совокупность методов, производственных процессов и программно-технических средств, объединенных в технологическую цепочку, обеспечивающих работу с информацией, с цельюснижения трудоемкости процессов использования информационных ресурсов.
      </p>
    </foreignObject>
  </g>
  <g>
    <foreignObject x="300" y="170" width="0" height="200px" class="fo fo2">
       <h3>В 2007 году</h3>
       <p>
        Для информационных технологий является вполне естественным то, что они устаревают и заменяются новыми. Так, например, телеграф передал все свои функции телефону. Телефон постепенно вытесняется службой экспресс доставки. Телекс передал большинство своих функций факсу и электронной почте.
      </p>
    </foreignObject>
  </g>
  <g>
    <foreignObject x="300" y="170" width="0" height="200px"  class="fo fo3">
       <h3>В 2012 году</h3>
       <p>
        Такие неудачи с внедрением информационной технологии обычно связывают с несовершенством технических средств, тогда как основной причиной неудач является отсутствие или слабая проработанность использования информационной технологии.
      </p>
    </foreignObject>
  </g>
  <g>
    <foreignObject x="300" y="170" width="0" height="200px"  class="fo fo4">
       <h3>В 2017 году</h3>
       <p>
        Информатизация общества является одной из закономерностей современного социального прогресса. Этот термин все настойчивее вытесняет широко используемый до недавнего времени термин “компьютеризация общества”. При внешней похожести этих понятий они имеют существенное различие.
      </p>
    </foreignObject>
  </g>
  <g>
    <foreignObject x="300" y="170" width="0" height="200px"  class="fo fo5">
       <h3>В 2019 году</h3>
       <p>
       При информатизации общества основное внимание уделяется комплексу мер, направленных на обеспечение полного использования достоверного, исчерпывающего и своевременного знания во всех видах человеческой деятельности.
      </p>
    </foreignObject>
  </g>
  <g>
    <foreignObject x="300" y="170" width="0" height="200px"  class="fo fo6">
       <h3>В 2020 году</h3>
       <p>
         Информатизация на базе внедрения компьютерных и телекоммуникационных технологий является реакцией общества на потребность в существенном увеличении производительности труда в информационном секторе общественного производства, где сосредоточено более половины трудоспособного населения. Так, например, в информационной сфере США занято более 60% трудоспособного населения, в СНГ – около 40%.
      </p>
    </foreignObject>
  </g>
</svg>
</div>

Вторая версия по типу слайдера с минимальным javascript

document.querySelectorAll(".dots").forEach(function(cir) {
  let pos = cir.getAttribute('data-pos');
  let orient = cir.getAttribute('data-orient');
  cir.onclick = function() {
    cloud.style.transform = `translate(${pos+"px"}, 0)`;
    news.style.transform = `translate(${-orient+"px"}, 0)`;
  }
})
#cloud,
#news {
  transition: 0.34s cubic-bezier(0, 1.28, 1, .12);
}

circle:hover {
  fill: lightblue;
  cursor: pointer;
}

.obj h1 {
  font-size: 28px
}

.obj p {
  font-size: 16px;
}

#data text {
  font-size: 14px;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg">
  <line x1="50" x2="950" y1="100" y2="100" stroke="#ccc" stroke-width="6" />
  
  <g fill="tomato">
    <circle cx="90"  cy="100" r="20" data-pos="0" data-orient="0" class="dots"/>
    <circle cx="200" cy="100" r="20" data-pos="110" data-orient="780" class="dots"/>
    <circle cx="430" cy="100" r="20" data-pos="340" data-orient="1730" class="dots"/>
    <circle cx="580" cy="100" r="20" data-pos="490" data-orient="2730" class="dots"/>
    <circle cx="860" cy="100" r="20" data-pos="770" data-orient="3730" class="dots"/>
  </g>
  
  <g id="cloud" fill="tomato">
    <path d="M85,50 95,50 90,57z"/>
    <circle cx="90" cy="25" r="25"></circle>
  </g>
  
  <g fill="#fff" id="data">
    <text x="73" y="30">2007</text>
    <text x="183" y="30">2012</text>
    <text x="413" y="30">2017</text>
    <text x="563" y="30">2018</text>
    <text x="843" y="30">2020</text>
  </g>
  
   <g id="news">
    <foreignObject x="200" y="150" width="500" height="300" class="obj">
       <h1>Мои достижения в 2007 году</h1>
      <p>Любой фрилансер может открыть такой контракт с любым незарегистрированным на бирже заказчиком, 3.4% оплачиваются за счет фрилансера.</p>
      <p>Защита обеспечивается через стандартный "страховочный фонд" биржи ( upwork escrow) который предусматривает примерно недельный срок для разрешения споров, выплаты фрилансеру за счет фонда если клиент мошенник и т.д.</p>
     </foreignObject>
     
    <foreignObject x="1000" y="150" width="500" height="300" class="obj">
       <h1>Мои достижения в 2012 году</h1>
      <p>Любой фрилансер может открыть такой контракт с любым незарегистрированным на бирже заказчиком, 3.4% оплачиваются за счет фрилансера.</p>
      <p>Защита обеспечивается через стандартный "страховочный фонд" биржи ( upwork escrow) который предусматривает примерно недельный срок для разрешения споров, выплаты фрилансеру за счет фонда если клиент мошенник и т.д.</p>
     </foreignObject>
     
    <foreignObject x="2000" y="150" width="500" height="300" class="obj">
       <h1>Мои достижения в 2017 году</h1>
      <p>Любой фрилансер может открыть такой контракт с любым незарегистрированным на бирже заказчиком, 3.4% оплачиваются за счет фрилансера.</p>
      <p>Защита обеспечивается через стандартный "страховочный фонд" биржи ( upwork escrow) который предусматривает примерно недельный срок для разрешения споров, выплаты фрилансеру за счет фонда если клиент мошенник и т.д.</p>
     </foreignObject>
     
    <foreignObject x="3000" y="150" width="500" height="300" class="obj">
       <h1>Мои достижения в 2018 году</h1>
      <p>Любой фрилансер может открыть такой контракт с любым незарегистрированным на бирже заказчиком, 3.4% оплачиваются за счет фрилансера.</p>
      <p>Защита обеспечивается через стандартный "страховочный фонд" биржи ( upwork escrow) который предусматривает примерно недельный срок для разрешения споров, выплаты фрилансеру за счет фонда если клиент мошенник и т.д.</p>
     </foreignObject>
     
    <foreignObject x="4000" y="150" width="500" height="300" class="obj">
       <h1>Мои достижения в 2020 году</h1>
      <p>Любой фрилансер может открыть такой контракт с любым незарегистрированным на бирже заказчиком, 3.4% оплачиваются за счет фрилансера.</p>
      <p>Защита обеспечивается через стандартный "страховочный фонд" биржи ( upwork escrow) который предусматривает примерно недельный срок для разрешения споров, выплаты фрилансеру за счет фонда если клиент мошенник и т.д.</p>
     </foreignObject>
  </g>  
</svg>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.