在寫JS Tween動(dòng)畫的時(shí)候，在還沒有執(zhí)行完一次onmouseover的情況下再次出發(fā)會(huì)出現(xiàn)圖片閃動(dòng)。怎樣解決？
?
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>
js tween動(dòng)畫閃動(dòng)問題
紅顏莎娜
2018-12-07 04:38:49
