<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding:0px;
margin:0px;}
#mask{
80px;
height:80px;
background: green;
opacity:0.5;
position: absolute;
top:0px;
left:0px;
z-index:99;
}
#box{
border:2px solid red;
overflow: hidden;
530px;
height:80px;
margin:50px auto;
position: relative;
}
#box li{
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="tween.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById("box");
var aLi=oBox.getElementsByTagName('li');
var oMask=document.getElementById("mask");
var c=Tween.Back.easeOut; //运动曲线
var bok=true; //用于判断鼠标移出是否在点击之后发生的，true是在点击之后
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseenter=function(){
bok=false; //鼠标移入且没有点击按钮让滑块回到0的位置
that=this;
move(oMask,{left:this.offsetLeft},{time:500,easing:c})
}
}
oBox.onmouseleave=function(){
if(bok){
move(oMask,{left:that.offsetLeft},{time:500,easing:c});
}
else{move(oMask,{left:0},{time:500,easing:c});}
}
oMask.onclick=function(){
bok=true; //点击之后让滑块固定
}
}
</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>