javascript - CSS 过渡以在单击时将点分页移动到左/右

Question

我正在尝试实现某种转换(或转换)CSS 分页的行为。

我有 5 个点，我想在用户单击相应按钮(向左或向右)时触发动画。

• 当用户点击左侧时，点应该向左移动。
• 当用户点击右侧时，点应该向右移动。

中间的点应该始终居中并且应该始终有 5 个点可见并且整个分页的位置不应该改变。

因此，如果您单击“向右”按钮:第四个点应向左滑动以显示它已成为事件点，反之亦然。

我试图表明当用户向左或向右单击时分页已经移动，这就是我正在努力的地方。请看下面的代码:

$('.left').click(function(e) {
  e.preventDefault();
  // some animation should happen here to show the pagination has been updated
});

$('.right').click(function(e) {
  e.preventDefault();
  // some animation should happen here to show the pagination has been updated
});

.left,
.right {
  display: inline-block;
  background: #000;
  color: #fff;
  width: 100px;
  text-align: center;
  margin-bottom: 20px;
}

.pagination {
  display: block;
  margin-bottom: 30px;
}

.dot {
  display: inline-block;
  height: 10px;
  width: 10px;
  background: #ccc;
  margin: 4px;
  vertical-align: middle;
  border-radius: 10px;
}

.dot:nth-child(even) {
  width: 8px;
  height: 8px;
}

.dot:nth-child(odd) {
  width: 6px;
  height: 6px;
}

.dot.active {
  background: #333;
  width: 10px;
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagination">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot active"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<a href="#" class="left">
left
</a>

<a href="#" class="right">
right
</a>

Answer 1

运行这个片段，根据你给我的例子，我想这就是你想要的。

解释:

现在分页有 2 个 div:一个外面的 div，把它想象成一个窗口，总是在相同的位置，宽度足以看到 5 个点。 (overflow:none 非常重要，因为窗口只显示 5 个点并隐藏任何不适合它的东西)。以及一个包含所有点的内部 div，我们将向左和向右移动。

var currentPage = 2;
processDotPosition();

$('.left' ).click(function() { currentPage -= 1; });
$('.right').click(function() { currentPage += 1; });

$('.left, .right').click(function(e) {
  e.preventDefault();
  processDotPosition();
});


function processDotPosition(){
  //settings
  var firstNavigableDot = 2;
  var lastNavigableDot = $('.dot').length-3;

  //don't allow going out of range
  if (currentPage<firstNavigableDot) currentPage=lastNavigableDot;
  if (currentPage>lastNavigableDot)  currentPage=firstNavigableDot;
  
  //manage "active" class
  $('.dot').removeClass('active').removeClass('nearActive');
  $('.dot').eq(currentPage).addClass('active');
  $('.dot').eq(currentPage+1).addClass('nearActive');
  $('.dot').eq(currentPage-1).addClass('nearActive');
  
  //slide the inner div (the +35 is for centering the active dot)
  var newPosition = -(currentPage-2)*19;
  $('.paginationInner').finish().animate({left: newPosition});

}

.left,
.right {
  display: inline-block;
  background: #000;
  color: #fff;
  width: 100px;
  text-align: center;
  margin-bottom: 20px;
}

.paginationOutter {
  display: block;
  margin-bottom: 30px;
  margin-left:50px;
  width: 100px; /* only show 5 dots */
  overflow: hidden;
  height:18px;
  position: relative;
  
}

.paginationInner{
  position:absolute;
}

.dot {
  display: inline-block;
  background: #ccc;
  margin: 4px;
  vertical-align: middle;
  border-radius: 10px;
  transition: height width 1s ease;
}


/* 1st and 5th */
.dot {
  width: 6px;
  height: 6px;
}

/* 2nd and 4th */
.dot.nearActive {
  width: 8px;
  height: 8px;
}


/* 3rd */
.dot.active {
  background: #333;
  width: 10px;
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="paginationOutter">
  <div class="paginationInner">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>    
  </div>
</div>

<a href="#" class="left">
left
</a>

<a href="#" class="right">
right
</a>