仿百度搜索热点列表的实现
2018-10-21 15:05:19 Handsome_fan 阅读?1063更多
分类专栏?frontend
版权声明：本文为博主原创文章，遵?CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明?
本文链接：https://blog.csdn.net/Handsome_fan/article/details/83241656
相信大家都用过百度搜索，其中在百度搜索结果的右侧会有一个搜索热点的列表?
这个搜索列表中有一个换一换的链接，当我们点击这个链接的时候列表就会更换一次。其实这个交互的实现效果非常的简单?
html代码如下?
列表1
列表2
列表3
列表4
列表5
列表6
列表7
列表8
列表9
列表10
列表11
列表12
列表13
列表14
列表15
列表16
列表17
列表18
列表19
列表20
列表21
列表22
列表23
列表24
列表25
列表26
列表27
列表28
列表29
列表30
?1
?2
?3
?4
?5
?6
?7
?8
?9
?10
?11
?12
?13
?14
?15
?16
?17
?18
?19
?20
?21
?22
?23
?24
?25
?26
?27
?28
?29
?30
?31
?32
?33
?34
?35
?36
?37
?38
?39
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 }
?1
?2
?3
?4
?5
?6
?7
?8
?9
?10
?11
?12
?13
?14
?15
?16
?17
?18
?19
?20
?21
?22
?23
?24
?25
?26
?27
我们打算用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();
?1
?2
?3
?4
?5
?6
?7
?8
?9
?10
?11
?12
?13
?14
?15
?16
?17
?18
?19
?20
?21
?22
最终的效果如下?
文章最后发