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

相信大家都用过百度搜索，其中在百度搜索结果的右侧会有一个搜索热点的列表。

这个搜索列表中有一个换一换的链接，当我们点击这个链接的时候列表就会更换一次。其实这个交互的实现效果非常的简单。
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();

最终的效果如下：

仿百度搜索热点列表的实现相关推荐

ajax仿百度搜索效果,利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）...
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 * { margin: 0px; padding: 0px; } #wrapper { height: 100% ...
php+ajax 仿百度搜索效果
php+ajax 仿百度搜索效果(代码csdn下载地址:http://download.csdn.net/detail/aa1049372051/7338675) 一共有四个文件 1.前台页面 in ...
仿百度搜索框–jQuery版本
仿百度搜索框–jQuery版本时维九月,序属三秋.此吾工作三个月之日,亦是吾重拾博客之时.一路坎坷走来,经历良多,收获甚多. 正题百度搜索框是企业开发中常用的一项功能,作为一个前端工作者,自然也是 ...
vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法 2.this.$http.post()方法 3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==&g ...
html+js仿百度搜索框，点击和回车跳转百度搜索
html+js仿百度搜索框,点击和回车跳转百度搜索代码 <!DOCTYPE html> <html lang="en"> <head>< ...
AJAX实例--根据邮政编号动态获取省，市，县三级地区+仿百度搜索下拉提示
最近一段时间自己一直在学习AJAX,忽然顿悟ajax的强大功能,实在让人吃惊.在接下来的几篇博客里,我将分享在学习过程中,自己写的一些小例子,欢迎大家一起交流学习...欢迎各位拍砖..你的关注是我不断 ...
爬虫，百度搜索热点排行
#!/usr/bin/env python # -*- coding:utf-8 -*-#爬虫,搜索热点排行 import urllib.request import urllib import re ...
仿百度搜索首页完整代码
仿百度首页未登陆状态页面初学HTML 做个小记录看看就好,也可以共同学习一下做的时候也有很多问题,现在也有点懵,还请各位看完指出问题 <!DOCTYPE html> <html ...
ES+HBase【案例】仿百度搜索04：开发仿百度搜索项目
一.介绍这个搜索引擎项目主要涉及到数据采集.数据存储.建立索引和数据展现环节. 针对一个搜索引擎项目而言,它的数据基本上都是来源于互联网上的公开数据,想要获取这些数据就需要使用爬虫工具了,目前市面上 ...

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

仿百度搜索热点列表的实现相关推荐

最新文章

热门文章