首页 新闻 搜索 专区 学院

js tween动画闪动问题

0
悬赏园豆:50 [已解决问题] 解决于 2017-07-05 11:54

在写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>                        
Rh九尾鱼的主页 Rh九尾鱼 | 初学一级 | 园豆:159
提问于:2017-01-18 16:59
< >
分享
最佳答案
0

var start=div.offsetLeft;

这句放到循环外。

你执行一次后,div的位置改变了。

收获园豆:40
盟怀部孩 | 小虾三级 |园豆:878 | 2017-02-07 11:46
其他回答(1)
0

延迟设置小一点

收获园豆:10
Ctrl` | 园豆:3246 (老鸟四级) | 2017-01-18 17:47

在哪里设置延迟,我没有设置延迟啊..setInterval的时间已经是0.1毫秒了

支持(0) 反对(0) Rh九尾鱼 | 园豆:159 (初学一级) | 2017-01-18 18:30
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册