效果图

结构
<div id="c-nav" class="c-nav">
<span class="cloud"></span>
<ul>
<li class="current">首页新闻</li>
<li>活动策划</li>
<li>师资力量</li>
<li>企业文化</li>
<li>招聘信息</li>
<li>公司简介</li>
<li>上海校区</li>
<li>广州校区</li>
</ul>
</div>
<script src="/animate.js"></script>
CSS
* {
padding: 0;
margin: 0;
}
body {
background: rgba(0, 0, 0, 0.8);
}
div {
position: relative;
width: 800px;
height: 42px;
margin: 100px auto;
border-radius: 5px;
background: url('https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a559d2ee1bd5a04779569') no-repeat center #ffffff;
}
ul {
list-style: none;
position: absolute;
}
li {
float: left;
width: 83px;
height: 42px;
font: 400 16px/42px "simsun";
text-align: center;
cursor: pointer;
}
span {
position: absolute;
width: 83px;
height: 42px;
left: 0;
background: url('https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a55a011001e6b8ea0cce3') no-repeat center #ffffff;
}
js
window.addEventListener('load', function ()
{
var cloud = document.querySelector('.cloud');
var c_nav = document.querySelector('.c-nav');
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 ()
{
current = this.offsetLeft;
})
}
})
animate.js
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
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';
}, 15);
}