HTML+JavaScript实现筋斗云导航栏效果
时间：2022-10-07 11:27:20 | 栏目：JavaScript代码 | 点击：次
功能要求：
1、鼠标经过某个li，筋斗云跟着到当前的位置
2、鼠标离开这个li，筋斗云回到原来的位置
3、鼠标点击了某个li，筋斗云就留在点击这个位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 500px;
height: 50px;
background-color: grey;
}
ul li {
list-style: none;
float: left;
text-align: center;
height: 40px;
line-height: 40px;
margin-left: 0px;
width: 70px;
padding-left: 0px
}
/* 问题一：之前好像有案例解决，文字与文字宽度一致 */
ul {
margin: 0px;
height: 50px;
line-height: 50px;
padding-top: 7px;
padding-left: 20px;
}
a {
display: inline-block;
width: 100%;
padding-left: 0px;
text-align: left;
color: black;
text-decoration: none;
}
img {
position: absolute;
top: -5px;
left: 5px;
width: 60px;
height: 60px;
opacity: 0.5;
}
</style>
<script src="cloud.js"></script>
<script src="animater.js"></script>
</head>
<body>
<div class="box">
<ul>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
</li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >文章</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >动态</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关注</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最新热门</a></li>
</ul>
<img src="祥云.png" alt="">
</div>
</body>
</html>
window.addEventListener('load', function() {
//获得每个li，以及img
var as = document.querySelectorAll('li')
var img = document.querySelector('img')
//给每个li添加点击事件
as[1].addEventListener('mousemove', function() {
animate(img, 75)
})
as[2].addEventListener('mousemove', function() {
animate(img, 145)
})
as[3].addEventListener('mousemove', function() {
animate(img, 215)
})
as[4].addEventListener('mousemove', function() {
animate(img, 300) //用mousemove事件比mouseover事件要好，防止震动
})
as[0].addEventListener('mousemove', function() {
animate(img, 5)
})
for (i = 0; i < as.length; i++) {
//给每个a添加一个自定义属性，倒是用来作为索引号
as[i].setAttribute('index', i)
}
var posi = 0
console.log(as[0].getAttribute('index'))
for (i = 0; i < as.length; i++) {
as[as[i].getAttribute("index")].addEventListener('mouseout', fn)
function fn() {
animate(img, posi)
}
}
//3，鼠标点击某个li，就固定在这个li上。离开经过某个li，就到某个li上，离开这个li，又回到刚刚的li上，相当于对初始位置的一个刷新
as[1].addEventListener('click', function() {
animate(img, 75)
posi = 75
//删除相应的离开事件
})
as[2].addEventListener('click', function() {
animate(img, 145)
posi = 145
})
as[3].addEventListener('click', function() {
animate(img, 215)
posi = 215
})
as[4].addEventListener('click', function() {
animate(img, 300) //用mousemove事件比mouseover事件要好，防止震动
posi = 300
})
as[0].addEventListener('click', function() {
animate(img, 5)
posi = 5
})
})
自己只能做的出这种简单的效果，而且还是bug
1、利用动画函数
2、原先图片的起始位置是0
3、鼠标经过某个li，把当前小li的offsetLeft作为目标值
4、如果点击了某个li，就把当前li的位置存起来，作为图片的起始位置
思路和自己想的是一样的，但是要注意位置的取法，是直接通过元素的点击，去自动获得元素的位置，（但并没有仔细考虑图片应该在文字的中心）
其次，加入了ul的绝对定位，这样可以消除抖动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.c-nav {
width: 600px;
height: 40px;
background-color: grey;
position: relative;
}
ul {
position: absolute;
text-align: center;
margin-left: 0px;
padding-left: 0px
}
/* 给ul也加上定位之后，就可以消除抖动 */
li {
top: 0px;
list-style: none;
float: left;
padding-left: 10px;
width: 80px;
height: 40px;
text-align: center;
line-height: 10px;
}
a {
color: black;
text-decoration: none;
}
.cloud {
position: absolute;
top: 0px;
left: 0px;
width: 70px;
height: 35px;
background-image: url(祥云.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
opacity: 0.6;
}
.current a {
color: red
}
</style>
<script src="animater.js"></script>
<script src="cloud.js"></script>
</head>
<body>
<div class="c-nav">
<span class="cloud"></span>
<ul>
<li class="current"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页新闻</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >师资力量</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >活动策划</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >企业文化</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >招聘信息</a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >公司简介</a></li>
</ul>
</div>
</body>
</html>
window.addEventListener('load', function() {
var c_nav = document.querySelector('.c-nav')
var cloud = document.querySelector('.cloud')
var lis = document.querySelectorAll('li')
var current = 0 //起始位置；别用手算，肯定是获得某个元素的位置
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener('mouseenter', function() {
animate(cloud, this.offsetLeft) //鼠标经过时候发生抖动：因为图片过来后，就发生冲突了，此时鼠标就在图片上面
})
//鼠标离开回到起始的位置
lis[i].addEventListener('mouseleave', function() {
animate(cloud, current)
})
//鼠标点击事件
lis[i].addEventListener('click', function() {
// alert(12)
// animate(cloud, this.offsetLeft) //点击了鼠标之后，图片的起始位置就发生改变了
current = this.offsetLeft
for (var i = 0; i < lis.length; i++) {
lis[i].className = ''
}
this.className = 'current'
})
}
})