<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
ul {list-style:none;}
body {
background-color: #000;
}
.nav {
800px;
height: 42px;
background:url("rss.png") no-repeat right center #fff;
margin: 100px auto;
border-radius: 5px;
position: relative;
}
.cloud {
83px;
height: 42px;
position: absolute;
top: 0;
left: 0;
background: url(cloud.gif) no-repeat;
}
.nav ul {
position: absolute;
top: 0;
left: 0;
}
.nav li {
float: left;
88px;
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 id="box">
<li>首页新闻</li>
<li>千锋师资</li>
<li>千锋活动策划</li>
<li>企业文化</li>
<li>招聘信息</li>
<li>公司简介</li>
<li>上海校区</li>
<li>广州校区</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var cloud = document.getElementById("cloud");
var list = document.getElementsByTagName("li");
var current = 0; //记录当前点击的位置
var timer = null;
function starMove( obj,target ){
clearInterval( obj.timer );
obj.timer = setInterval( function(){
var speed = ( target - obj.offsetLeft )/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if( obj.offsetLeft == target ){
clearInterval( obj,timer );
}else{
obj.style.left = obj.offsetLeft + speed + "px";
}
},30 )
}
for( var i = 0 ; i < list.length ; i++ ){
list[i].onmouseenter = function(){
starMove( cloud, this.offsetLeft );
}
list[i].onmouseleave = function(){
starMove( cloud, current );
}
list[i].onclick = function(){
current = this.offsetLeft;
}
}
</script>