原生js实现毛毛虫导航
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
position: relative;
width: 700px;
margin: 100px auto;
padding: 20px;
display: flex;
justify-content: space-around;
border: 1px solid aqua;
}
ul>li {
list-style: none;
}
p {
position: absolute;
width: 40px;
height: 6px;
background: red;
border-radius: 12px;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<ul>
<li>加油骚年</li>
<li>头脑清楚</li>
<li>每天学习js巩固</li>
<li>js永远的神</li>
<li>太喜欢js了</li>
<li>敲js代码使自己快乐</li>
<p></p>
</ul>
</body>
</html>
<script type="text/javascript">
var li = document.querySelectorAll('li')
var p = document.querySelectorAll('p')
//点击改变
for (var i = 0; i < li.length; i++) {
li[i].addEventListener('click', function(e) {
p[0].style.left = (this.offsetLeft + this.offsetWidth / 2 - p[0].offsetWidth / 2) + 'px' //计算滑块位置
//点击获取当前li的位置然后赋值给下面滑块
p[0].style.transition = 'all 0.3s'
//设置过渡动画效果
})
}
//首次加载让滑块去第一个li下面
(function fn() {
p[0].style.left = (li[0].offsetLeft + li[0].offsetWidth / 2 - p[0].offsetWidth / 2) + 'px'
})()
</script>
