每次单击按钮移动 right/left

Question

我正在尝试制作 "timeline"。我这样做是为了更多地了解 jquery，所以我尽量不使用任何 "timeline js plugins".

我使用 jQuery 函数将用户点击的事件居中。我通过使用转换来做到这一点：

$('.tl-container').css('transform', 'translateX(' + movingDistance + 'px)');

然后我添加了几个箭头，这样用户就可以左右移动并查看可能看不见的其他事件。

我怎样才能让按钮在每次点击时将时间轴移动 100 像素？

我第一次尝试也使用翻译的想法，但那没有用。它会翻译一次，但第二次点击将不再起作用（因为时间线已经在翻译的"end"。

然后我尝试使用 .animate()。这可行，但有一个主要问题。它 "offsets" 整个时间轴，所以当我点击一个事件时它不会居中（它将移动到新的 "offset center".

有什么想法吗？

这是一个 CodePen，展示了我现在拥有的东西： https://codepen.io/anon/pen/bVJQbB

如果你愿意，我在 GitHug 上也有这个项目： https://github.com/boguz/chronos

Answer 1

我分叉了你的笔：https://codepen.io/sodawillow/pen/MaRZLa

在 HTML 中，我添加了两个带有 next 和 prev ID 的按钮（仅用于测试目的，因为当我第一次处理您的箭头时，您的箭头没有显示在 Firefox 上笔）：

<button id="prev">prev</button>
<button id="next">next</button>

在 JS 中，我添加了一个全局变量 (activeEventNumber) 来保存当前的活动事件，并在您的代码中使用它来使光标向前或向后移动一步。当然，这可以稍微改进一下:

$("#prev").on("click", prevEvent);
$("#next").on("click", nextEvent);

function prevEvent() {
  var eventSize = $('.tl-event').width(),
    windowSize = $(window).width(),
    clickedPosition = eventSpacing * --activeEventNumber + eventSize * activeEventNumber,
    movingDistance = windowSize / 2 - clickedPosition - eventSpacing / 2 - eventSpacing * 1.7;
  $('.tl-container').css('transform', 'translateX(' + movingDistance + 'px)');
  activeEvent($(".tl-event").eq(activeEventNumber - 1));
}

function nextEvent() {
  var eventSize = $('.tl-event').width(),
    windowSize = $(window).width(),
    clickedPosition = eventSpacing * ++activeEventNumber + eventSize * activeEventNumber,
    movingDistance = windowSize / 2 - clickedPosition - eventSpacing / 2 - eventSpacing * 1.7;
  $('.tl-container').css('transform', 'translateX(' + movingDistance + 'px)');
  activeEvent($(".tl-event").eq(activeEventNumber - 1));
}

PS : 我会努力改进我笔下的JS

EDIT：我的笔有你的箭头和我的箭头，我试着尽可能地擦干 JS（比你的 JS 少行:)）。我也添加了键盘箭头。如果你不明白some/anything，请告诉我。

// Use Strict Mode
"use strict";

// GLOBAL variables
var eventSpacing = 50, activeEventNumber = 0, clickedEventNumber, eventSize, windowSize;

// DOCUMENT READY FUNCTION
$(function () {
  
  //set useful values
  clickedEventNumber = $(this).index();
  eventSize = $('.tl-event').width();
  windowSize = $(window).width();

  createTimeline();
  initEvents();

}); // end of document.ready

function createTimeline() {
  var numberOfEvents = $('.tl-event').length;
  
  $('.tl-line').each(function() {
    var lineLength = numberOfEvents * (eventSpacing + eventSize);
    $('.tl-container').css('width', lineLength + (eventSpacing * 2) +'px');
    $('.tl-line').css('left', eventSpacing + 'px');
    $('.tl-line').css('width', lineLength + 'px');
  });
  
  $('.tl-event').each(function() {
    var eventNumber = $(this).index();
    var eventHorPosition = eventNumber * eventSpacing + eventSpacing / 2;
    $(this).css('left', eventHorPosition + 'px');
  });
}

function initEvents() {
  
  //click
  $('.tl-event').on('click', function() {
    activeEventNumber = $(this).index();
    moveCursor(activeEventNumber);    
  });
  
  //buttons
  $('#prev, .arrow-before').on("click", moveToPrevEvent);
  $('#next, .arrow-after').on("click", moveToNextEvent);
  
  //keyboard arrows
  $(window).on("keydown", function(e) {
    switch(e.which) {
      case 37: moveToPrevEvent(); break; //left arrow key
      case 39: moveToNextEvent(); break; //right arrow key
      default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
  });
  
  //next and previous functions
  function moveToPrevEvent() { if(activeEventNumber > 1) moveCursor(--activeEventNumber); } 
  function moveToNextEvent() { if(activeEventNumber < $('.tl-event').length) moveCursor(++activeEventNumber); }

  //main function to select an event
  function moveCursor(eventNumber) {
    var clickedPosition, movingDistance;  
    //move
    clickedPosition = (eventSpacing + eventSize) * eventNumber;
    movingDistance = windowSize / 2 - clickedPosition - eventSpacing * 2.2; //magic number ! :) 1.7 + .5
    $('.tl-container').css('transform', 'translateX(' + movingDistance + 'px)');
    //style
    $('.tl-event').css('background-color', 'white');
    $($(".tl-event").eq(activeEventNumber - 1)).css('background-color', 'red');
  }
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #444;
  color: #fff;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
}


.tl-mask {
  border: 1px solid red;
  height: 200px;
  width: 86vw;
  margin: 10vh auto 0;
  overflow: hidden;
  position: relative;
}
.arrow {
  height: 40px;
  position: absolute;
  top: 188px;
  opacity: .2;
}
.arrow:hover {
  opacity: .75;
  cursor: pointer;
}
.arrow-before {
  left: 50px;
}
.arrow-after {
  right: 50px;
}
.tl-container {
  height: 200px;
  background-color: #666;
  position: relative;
  transition: all 2s ease;
  min-width: 100%;
}
.tl-line {
  background-color: white;
  height: 2px;
  display: block;
  position: relative;
  top: 100px;
}
.tl-event {
  background-color: white;
  height: 10px;
  width: 10px;
  position: relative;
  top: 94px;
  border-radius: 50%;
  float: left;
}
.tl-event:hover {
  cursor: pointer;
}

.center-check {
  background-color: white;
  width: 3px;
  height: 20px;
  margin: 10px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>chronos</h1>
<img src="./img/arrow_before.png" alt="" class="arrow arrow-before">

<div class="tl-mask">
  <div class="tl-container">
    <div class="tl-line"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
    <div class="tl-event"></div>
  </div> <!-- end .tl-container -->
</div> <!-- end -tl-mask -->

<img src="./img/arrow_after.png" alt="" class="arrow arrow-after">
<div class="center-check"></div>

<button id="prev">prev</button>
<button id="next">next</button>

每次单击按钮移动 right/left

move right/left each time button is clicked

css

jquery

timeline

css-transforms

jquery-animate