<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding:0px;
margin:0px;}
#mask{
width:80px;
height:80px;
background: green;
opacity:0.5;
position: absolute;
top:0px;
left:0px;
}
#box{
border:2px solid red;
overflow: hidden;
width:530px;
height:80px;
margin:50px auto;
position: relative;
}
#box li{
width:80px;
height:80px;
line-height: 80px;
float:left;
background: #999;
list-style: none;
margin-right:10px;
text-align: center;
font-size:20px;
color:#fff;
}
#box .list{margin-right:0px}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById("box");
var aLi=oBox.getElementsByTagName(‘li‘);
var oMask=document.getElementById("mask");for(var i=0;i<aLi.length;i++){
aLi[i].onmouseenter=function(){
move(oMask,{left:this.offsetLeft},{time:500,easing:‘ease-out‘})
}
}
oBox.onmouseleave=function(){
move(oMask,{left:0},{time:500,easing:‘ease-out‘});
}
}
</script>
</head>
<body>
<ul id="box">
<li>第一块</li>
<li>第二块</li>
<li>第三块</li>
<li>第四块</li>
<li>第五块</li>
<li class="list">第六块</li>
<div id="mask"></div>
</ul>
</body>
</html>
原文：http://www.cnblogs.com/yang0902/p/5701197.html