之前在某站看到导航带有滑块效果，而不是常见的鼠标hover时改变li的背景色，就想着自己也写一个这个的效果。今天终于动手实现了，也没有花多长时间，不难哦。
效果如下（抱歉没能动态展示）:
image.png
不赘述，直接贴代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
width: 800px;
height: 300px;
margin:0 auto;
}
ul{
position: relative;
}
li{
width: 100px;
height: 30px;
line-height: 30px;
float: left;
background: #000;
color: blue;
text-align: center;
}
li span{
position: relative;
z-index: 2;
}
.slider{
width: 100px;
height: 30px;
background: yellow;
position: absolute;
top: 0;
left: 0;
transition:all 1s ease 0s;
}
</style>
</head>
<body>
<div class="warp">
<ul id="nav">
<li><span>item-1</span></li>
<li><span>item-2</span></li>
<li><span>item-3</span></li>
<li><span>item-4</span></li>
<li><span>item-5</span></li>
<li><span>item-6</span></li>
</ul>
<div class="slider" id="slider"></div>
</div>
<script type="text/javascript">
var nav=document.getElementById("nav");
var lis=nav.getElementsByTagName("li");
var len=lis.length;
var slider=document.getElementById("slider");
for(let i=0;i<len;i++){
lis[i].index=i;
lis[i].onmouseleave=function(){
slider.style.transform="translateX(0)";
}
lis[i].onmouseenter=function(){
slider.style.transform="translateX("+i*100+"px)";
}
}
</script>
</body>
</html>
有一点要注意的是，html中有定位的元素会压盖没有定位的元素，而都有定位的元素html结构在后面的会压盖在前面的。即不设置压盖顺序的情况下，slider会压盖li的内容，导致页面渲染后看不到li的内容如item-1。但是如果给li设置z-index值又会导致slider被压盖，看不到滑块的效果。
怎么做到既能显示li的内容又能显示slider的效果呢？
首先要明确的是，slider必须要压盖li才能显示slider的效果。根据现有的html结构加上slider设置的absolute定位就可以做到（有定位的元素会压盖没有定位的元素）。
还有一点就是可以通过设置z-index来自定义压盖顺序,但是li又不能设置z-index。既如此，那就只能是操作其它dom元素了。毫无疑问，这个dom元素必须是li的子元素。所以可以给li的text部分再嵌套一层，span就可以，然后给span设置z-index。
这还没完哦！不要忘了，只有有定位的元素可以使用z-index。所以，要给span定位，设置position:relative就可以啦！
小小一个demo,知识点还是很多的哦。
:-D:-D
网友评论