一、案例分析
① 鼠标经过某个 li,筋斗云就会跟着移动到当前 li 的位置;
② 鼠标离开 li,筋斗云就复原到原来的位置;
③ 当鼠标点击了某个 li,筋斗云就停留在该位置;
④ 利用动画函数做动画效果;
⑤ 原先筋斗云的起始位置是0;
⑥ 鼠标经过某个 li,就把当前 li 的 offsetLeft 位置作为目标值 target 即可;
⑦ 鼠标离开,就恢复初始值;
⑧ 鼠标点击 li,就将当前 offsetLeft 作为初始值即可。
二、代码实现
① 筋斗云.html
<!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>
<link href="筋斗云.css" rel="stylesheet"/>
<script src="筋斗云动画.js"></script>
<script src="筋斗云.js"></script>
</head>
<body>
<div class="nav">
<span class="cloud"></span>
<ul>
<li class="current"><a href="javascript:;">首页新闻</a></li>
<li><a href="javascript:;">师资力量</a></li>
<li><a href="javascript:;">活动策划</a></li>
<li><a href="javascript:;">企业文化</a></li>
<li><a href="javascript:;">招聘信息</a></li>
<li><a href="javascript:;">公司简介</a></li>
<li><a href="javascript:;">上海校区</a></li>
<li><a href="javascript:;">广州校区</a></li>
</ul>
</div>
</body>
</html>
② 筋斗云.css
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
.nav {
position: relative;
width: 800px;
height: 40px;
margin: 100px auto;
padding-left: 30px;
padding-right: 30px;
background-color: white;
}
ul {
position: absolute;
width: 100%;
height: 100%;
}
ul li {
float: left;
width: 100px;
font-size: 17px;
text-align: center;
line-height: 40px;
list-style: none;
}
ul a {
text-decoration: none;
color: black;
}
.cloud {
position: absolute;
top: 0;
left: 30px;
width: 100px;
height: 40px;
background: url(cloud.png) no-repeat;
background-size: 100% 100%;
}
③ 筋斗云.js
window.addEventListener('load', function() {
var cloud = document.querySelector('.cloud');
var nav = document.querySelector('.nav');
var lis = nav.querySelectorAll('li');
var current = 30;
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener('mouseenter', function() {
animate(cloud, this.offsetLeft + 30);
})
lis[i].addEventListener('mouseleave', function() {
animate(cloud, current);
})
lis[i].addEventListener('click', function() {
current = this.offsetLeft + 30;
})
}
})
④ 筋斗云动画.js
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(fn, 4);
function fn() {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
if (callback) {
callback();
}
}
obj.style.left = obj.offsetLeft + step + 'px';
}
}
运行结果: