问答详情
源自：4-1 JS多物体动画

动画效果没有显示出来，求指错

<style type="text/css">

*{margin:0;padding:0;}

ul,li{

list-style:none;

}

    ul li{

width:200px;

height:100px;

background:yellow;

margin-bottom:20px;

}</style>

        <script>

        window.onload=function(){

var odiv=document.getElementsByTagName('li');

for(var i=0;i<odiv.length;i++){

odiv[i].timer=null;

odiv[i].onmouseover=function(){

startMove(this,400);}

odiv.onmouseout[i]=function(){

startMove(this,200);}

}

}

function startMove(obj,iTarget){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var speed=(iTarget-obj.offsetWidth)/8;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(alpha==iTarget){

clearInterval(obj.timer);}

else{

obj.style.width=obj.offsetWidth+speed+'px';

}

}

,30)

}

        </script>

</head>


<body>

<ul>

<li></li>

<li></li>

<li></li></ul></body>

</html>


提问者：嘻嘻哈哈12138 2016-07-23 14:41

个回答

  • 嘻嘻哈哈12138
    2016-07-23 19:30:07

    这个错找了好久都没看出来

    0
  • 嘻嘻哈哈12138
    2016-07-23 19:25:43

    非常感谢

    0
  • ypc8272805
    2016-07-23 15:35:17

    你有好几个问题 

    odiv.onmouseout[i]=function(){
startMove(this,200);}

    这个地方写错了 ,改正一下

    odiv[i].onmouseout=function(){
startMove(this,200);}

    还有 后面startMove函数中有问题

    if(alpha==iTarget){
clearInterval(obj.timer);}
else{
obj.style.width=obj.offsetWidth+speed+'px';
}

    改为

    if(obj.offsetWidth==iTarget){
clearInterval(obj.timer);}
else{
obj.style.width=obj.offsetWidth+speed+'px';
}


    0