主页 / 问题 / 1112374
Accepted
Александр
Asked:2020-04-19 05:08:26 +0000 UTC2020-04-19 05:08:26 +0000 UTC

进度条+光滑滑块？

  • 772

如何使用进度条实现类似的滑块？

我不知道如何计算年份之间的差异，因此将它们延伸到整个乐队。日期之间的间隔越大，条带上的距离就越大。

在此处输入图像描述

javascript

1 个回答

  1. Best Answer

    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>

    • 13

相关问题