分析
- 利用动画函数做动画效果
- 设置筋斗云的起始位置为0
- 鼠标经过某个li元素,将当前li的offsetLeft位置作为目标值即可
- 鼠标离开时将目标值设置为0
代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none;
}
body {
background-color: black;
}
.c-nav {
width: 900px;
height: 42px;
background: #fff url(images/rss.png) no-repeat right center;
margin: 100px auto;
border-radius: 5px;
position: relative;
}
.c-nav ul {
position: absolute;
}
.c-nav li {
float: left;
width: 83px;
text-align: center;
line-height: 42px;
}
.c-nav li a {
color: #333;
text-decoration: none;
display: inline-block;
height: 42px;
}
.c-nav li a:hover {
color: white;
}
.cloud {
position: absolute;
left: 0;
top: 0;
width: 83px;
height: 42px;
background: url(images/cloud.gif) no-repeat;
}
</style>
</head>
<body>
<div id="c_nav" class="c-nav">
<span class="cloud"></span>
<ul>
<li><a href="#">首页新闻</a></li>
<li><a href="#">师资力量</a></li>
<li><a href="#">活动策划</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">招聘信息</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">我是佩奇</a></li>
<li><a href="#">啥是佩奇</a></li>
</ul>
</div>
<script src="animate.js"></script>
<script>
var cloud = document.querySelector('.cloud');
var c_nav = document.querySelector('.c-nav');
var lis = c_nav.querySelectorAll('li');
//给所有的li绑定事件
//设置current作为筋斗云的起始位置
var current = 0;
for(var i = 0; i<lis.length; i++) {
//鼠标经过把当前li的位置作为目标值
lis[i].addEventListener('mouseenter', function() {
animate(cloud, this.offsetLeft);
})
//鼠标离开将筋斗云位置复原为0
lis[i].addEventListener('mouseleave', function() {
animate(cloud, current);
})
//鼠标点击li则将当前位置作为目标值
lis[i].addEventListener('click', function() {
current = this.offsetLeft;
})
}
</script>
</body>
</html>