body {
background:url(http://img3.iqilu.com/data/attachment/forum/201308/21/171204uuemoyup4go3ksum.jpg)
}
*{margin: 0; padding: 0;}
ul{list-style:none;}
.nav {
800px;
height: 42px;
background:url(img/rss.png) no-repeat right center #fff;
margin: 150px auto;
border-radius: 5px;
position: relative;
}
.nav ul {
position: absolute;
top: 0;
left: 50px;
}
.nav li {
float: left;
83px;
height: 42px;
line-height: 42px;
text-align: center;
cursor: pointer;
}
.s{
83px;
height: 42px;
position: absolute;
top: 0;
left:50px;
background: url(img/cloud.gif) no-repeat;
}
</style>
</head>
<body>
<div class="nav" id="nav1">
<span class="s" id="s1"></span>
<ul>
<li>文件</li>
<li>编辑</li>
<li>插入</li>
<li>转义</li>
<li>跳转</li>
<li>查找</li>
<li>运行</li>
<li>发行</li>
</ul>
</div>
</body>
</html>
<script>
var s1 = document.getElementById("s1"); // 云彩
var nav1 = document.getElementById("nav1");
var lis = nav1.children[1].children;
var current = 0;
for(var i=0; i<lis.length;i++) {
lis[i].onmouseover = function() {
target = this.offsetLeft;
}
lis[i].onmouseout = function() {
target = current;
}
lis[i].onclick = function() {
current = this.offsetLeft;
}
}
var leader =0, target = 0;
setInterval(function(){
leader = leader + (target - leader )/10 ;
s1.style.left = leader+50 + "px";
},10);