相信大家都用過百度搜索，其中在百度搜索結果的右側會有一個搜尋熱點的列表。

這個搜尋列表中有一個換一換的連結，當我們點選這個連結的時候列表就會更換一次。其實這個互動的實現效果非常的簡單。
html程式碼如下：

<div class="out">
  <div class="change-link">
    <a href="javascript:;">換一批</a>
  </div>
  <div class="list">
    <div class="item-out">
      <div class
 
="item">列表1</div>
      <div class="item">列表2</div>
      <div class="item">列表3</div>
      <div class="item">列表4</div>
      <div class="item">列表5</div>
      <div class="item">列表6</div>
      <div class="item">列表7</div>
      <
 
div class="item">列表8</div>
      <div class="item">列表9</div>
      <div class="item">列表10</div>
      <div class="item">列表11</div>
      <div class="item">列表12</div>
      <div class="item">列表13</div>
      <div class="item">列表14</
 
div>
      <div class="item">列表15</div>
      <div class="item">列表16</div>
      <div class="item">列表17</div>
      <div class="item">列表18</div>		
      <div class="item">列表19</div>
      <div class="item">列表20</div>
      <div class="item">列表21</div>
      <div class="item">列表22</div>
      <div class="item">列表23</div>
      <div class="item">列表24</div>		
      <div class="item">列表25</div>
      <div class="item">列表26</div>
      <div class="item">列表27</div>
      <div class="item">列表28</div>
      <div class="item">列表29</div>
      <div class="item">列表30</div>
    </div>
  </div>
</div>

css樣式如下：

* {
  margin: 0;
  padding: 0;
}
.change-link {
  width: 300px;
  margin: 110px auto 0;
}
.list {
  width: 300px;
  box-sizing: border-box;
  margin: 0px auto;
  height: 132px;
  overflow: hidden;
  position: relative;
  border: 1px solid #F9CC9D;
}
.list .item-out {
  position: absolute;
  width: 100%;
}
.list .item {
  height: 21px;
}
.list .item:nth-child(even) {
  background-color: #E6E6E6
}

我們打算用js去控制.item-out元素的top值來達到列表切換的效果，具體的js實現程式碼如下：

var changeLinkModule = (function() {
  var oList = document.querySelector('.item');
  var listH = oList.offsetHeight * 6;
  var oItemOut = document.querySelector('.item-out');
  var itemOutH = oItemOut.offsetHeight;
  var oA = document.querySelector('.change-link a');
  var clickCount = 0;
  var changeList = function () {
    oA.addEventListener('click', function() {
      console.log('點選');
      clickCount++;
      if (clickCount == 5) {
        clickCount = 0;
      }
      oItemOut.style.top = -126 * clickCount + 'px';
    })
  };
  return {
    changeList: changeList
  }
})();
changeLinkModule.changeList();

最終的效果如下：