仿百度搜索热点列表的实现

最新推荐文章于 2025-03-13 22:46:39 发布

frank201113

最新推荐文章于 2025-03-13 22:46:39 发布

阅读量3.3k

点赞数 5

分类专栏： frontend 文章标签： js 切换

本文链接：https://blog.csdn.net/handsome_fan/article/details/83241656

版权

frontend 专栏收录该内容

33 篇文章

订阅专栏

相信大家都用过百度搜索，其中在百度搜索结果的右侧会有一个搜索热点的列表。
在这里插入图片描述
这个搜索列表中有一个换一换的链接，当我们点击这个链接的时候列表就会更换一次。其实这个交互的实现效果非常的简单。
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();