水平时间线

Question

我已经将一个 JSFiddle 放在一起，用 CSS 和 JQuery 创建一个水平时间线。时间线的行为如下：

当页面加载时，“timelineSlider”总是将自己定位在“Link 1”下。 单击每个名为“Link”的列表项，“timelineSlider”会滑向该列表项并在该列表项下方滑动。

目前，当用户点击 Link1、Link2、Link3 和 Link4 时，它会按顺序工作。但是我希望用户以任何顺序单击任何列表项，并且“timelineSlider”应该向右或向左滑动或不改变位置，具体取决于“timelineSlider”的先前位置。如何更改我的 JS 代码来执行此操作？

JSFiddle

$(document).ready(function() {
  $("li").click(function() {
    //Get Initial timelineSlider Margin
    var timelineSliderMargin = parseInt($('.timelineSlider').css('margin-left'));
    //Slide the box to the link clicked (left or right) depending on box position
    $(".timelineSlider").animate({
      'margin-left': (parseInt(calculate(0)) + parseInt($('.timelineSlider').css('margin-left'))) + 'px'
    });
  });
});

function calculate(i) {
  var sum = 0;
  for (var j = 0; j <= i; j++) {
    sum = sum + $("ul li:eq(" + j + ")").outerWidth(true);
  }
  return sum;
}

div.eventsWrapper {
  height: 75px;
  margin-left: 5px;
  position: absolute;
  width: 800px;
}
.eventsConnector {
  background: #0070c0 none repeat scroll 50% 50%;
  height: 3px;
  left: 0;
  margin-left: 185px;
  margin-top: -31px;
  position: absolute;
  transition: transform 0.4s ease 0s;
  width: 512px;
  z-index: -1;
}
#events {
  z-index: 2;
}
#events ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#events li {
  display: inline-block;
}
#events a {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px #0070c0 solid;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 15px;
  text-align: center;
  line-height: 50px;
  margin-left: 125px;
  z-index: 3;
  color: #666666;
  background-color: #0070c0;
}
#events a .event {
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 50%;
  color: #666666;
  display: block;
  font-size: 15px;
  height: 48px;
  margin-left: 0;
  margin-top: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  width: 48px;
  z-index: 4;
}
.timelineSlider {
  width: 110px;
  height: 66px;
  border: 0px;
  margin-left: 95px;
  margin-top: 10px;
  position: absolute;
  z-index: 2;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="eventsWrapper">
  <div id="events">
    <ul>
      <li>
        <a href="#1">
          <div class="event">LINK1</div>
        </a>
      </li>
      <li>
        <a href="#2">
          <div class="event">LINK2</div>
        </a>
      </li>
      <li>
        <a href="#3">
          <div class="event">LINK3</div>
        </a>
      </li>
      <li>
        <a href="#4">
          <div class="event">LINK4</div>
        </a>
      </li>
    </ul>
  </div>
  <div class="eventsConnector"></div>
  <div class="timelineSlider">Slide this box to the link clicked.</div>
</div>

Answer 1

不用calculate函数也可以，

只需检查$(this) 左侧的偏移量， 并用它来定位红框：

$(document).ready(function() {
  $("li").click(function() {
    //Get Initial timelineSlider Margin
    var timelineSliderMargin = parseInt($('.timelineSlider').css('margin-left'));
    
    var left = $(this)[0].offsetLeft;
    //Slide the box to the link clicked (left or right) depending on box position
    $(".timelineSlider").animate({
      'left': (left +  'px')
    });
  });
});

/*function calculate(i) {
  var sum = 0;
  for (var j = 0; j <= i; j++) {
    sum = sum + $("ul li:eq(" + j + ")").outerWidth(true);
  }
  return sum;
}*/

div.eventsWrapper {
  height: 75px;
  margin-left: 5px;
  position: absolute;
  width: 800px;
}
.eventsConnector {
  background: #0070c0 none repeat scroll 50% 50%;
  height: 3px;
  left: 0;
  margin-left: 185px;
  margin-top: -31px;
  position: absolute;
  transition: transform 0.4s ease 0s;
  width: 512px;
  z-index: -1;
}
#events {
  z-index: 2;
}
#events ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#events li {
  display: inline-block;
}
#events a {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px #0070c0 solid;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 15px;
  text-align: center;
  line-height: 50px;
  margin-left: 125px;
  z-index: 3;
  color: #666666;
  background-color: #0070c0;
}
#events a .event {
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 50%;
  color: #666666;
  display: block;
  font-size: 15px;
  height: 48px;
  margin-left: 0;
  margin-top: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  width: 48px;
  z-index: 4;
}
.timelineSlider {
  width: 110px;
  height: 66px;
  border: 0px;
  margin-left: 95px;
  margin-top: 10px;
  position: absolute;
  z-index: 2;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="eventsWrapper">
  <div id="events">
    <ul>
      <li>
        <a href="#1">
          <div class="event">LINK1</div>
        </a>
      </li>
      <li>
        <a href="#2">
          <div class="event">LINK2</div>
        </a>
      </li>
      <li>
        <a href="#3">
          <div class="event">LINK3</div>
        </a>
      </li>
      <li>
        <a href="#4">
          <div class="event">LINK4</div>
        </a>
      </li>
    </ul>
  </div>
  <div class="eventsConnector"></div>
  <div class="timelineSlider">Slide this box to the link clicked.</div>
</div>