在写JS Tween动画的时候，在还没有执行完一次onmouseover的情况下再次出发会出现图片闪动。怎样解决？
CSS:
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#div{
position: absolute;
left: 0;
width: 102px;
height: 5px;
background: black;
}
#ul{
height: 52px;
width: 450px;
list-style: none;
}
#ul li{
float: left;
width: 100px;
border-top: 1px black solid;
border-bottom: 1px black solid;
height: 50px;
line-height: 50px;
text-align: center;
}
</style>
Html:
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="div"></div>
JS:
<script type="text/javascript" src="tween.js"></script>
<script type="text/javascript">
var div=document.querySelector("#div");
var ul=document.querySelector("#ul");
var li=document.querySelectorAll("#ul li");
var _width=div.offsetWidth;
console.log(_width);
for(i=0;i<4;i++){
li[i].index=i;
li[i].onmouseover=function(){
var start=div.offsetLeft;
var startStep=0;
var change=_width*this.index-div.offsetLeft;
var endStep=100;
var timer=setInterval(function(){
startStep++;
if(startStep>=endStep){
clearInterval(timer);
}
div.style.left=Tween.Linear(startStep,start,change,endStep)+"px";
},.1)
}
}
</script>
添加回答
举报
0/150
提交
取消