<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0; padding: 0;}
ul {list-style:none;}
body {background-color: #000;}
.nav {width: 800px;height: 42px;background:url("../img/rss.png") no-repeat right center #fff;margin: 100px auto;border-radius: 5px;position: relative;}
.cloud { width: 83px;height: 42px;position: absolute;top: 0;left: 0;background: url(../img/cloud.gif) no-repeat;}
.nav ul {position: absolute;top: 0;left: 0;}
.nav li {float: left;width: 83px;height: 42px;line-height: 42px;text-align: center;color: #000; cursor: pointer;}
</style>
</head>
<body>
<div class="nav" id="nav">
<span class="cloud" id="cloud"></span>
<ul>
<li></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var cloud = document.getElementById('cloud');
var nav = document.getElementById('nav');
var lis = nav.children[1].children;
var current = 0;
for (var i = lis.length - 1; i >= 0; i--) {
lis[i].onmouseover = function() {
target = this.offsetLeft;
}
lis[i].onmouseout = function() {
target = current;
}
lis[i].onclick = function() {
current = this.offsetLeft;
}
var target = 0,leader = 0;
setInterval(function(){
leader = leader + (target - leader) / 10;
cloud.style.left = leader + 'px';
},10)
}
</script>
