为了账号安全,请及时绑定邮箱和手机立即绑定

感觉我和老师写的差不多啊怎么这么大问题啊,定时器还是一个感觉。。。大神帮我看下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多物体运动</title>
<style type="text/css">
*{margin:0;padding:0;}
ul{
    width:600px;
    height:600px;
    border:1px solid #000;
    list-style:none;
}
li{
    width:60px;
    height:100px;
    background:#F00;
    display:block;
    float:left;
    margin:auto 0px auto 20px;
}
</style>
<script type="text/javascript">
window.onload=function(){
    var aLi=document.getElementsByTagName('li');
    
    for(var i=0;i<aLi.length;i++){
        aLi[i].timer=null;
        aLi[i].onmouseover=function(){
            startMove(this,400);
        };
        aLi[i].onmouseout=function(){
            startMove(this,100)
        };
    };
};
//var timer=null;
function startMove(obj,iTarget){
    
    clearInterval(obj.timer);
    speed=(iTarget-obj.offsetHeight)/10;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    obj.timer=setInterval(function(){
        if(obj.offsetHeight==iTarget){
            clearInterval(obj.timer);
        }
        else{
            obj.style.height=obj.offsetHeight+speed+'px';
        }
    },30)
};
</script>
</head>

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

正在回答

2 回答

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>多物体运动</title>

<style type="text/css">

*{margin:0;padding:0;}

ul{

    width:600px;

    height:600px;

    border:1px solid #000;

    list-style:none;

}

li{

    width:60px;

    height:100px;

    background:#F00;

    display:block;

    float:left;

    margin:auto 0px auto 20px;

}

</style>

<script type="text/javascript">

window.onload=function(){

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

    

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

        aLi[i].timer=null;

        aLi[i].onmouseover=function(){

            startMove(this,400);

        };

        aLi[i].onmouseout=function(){

            startMove(this,100)

        };

    };

};

//var timer=null;

function startMove(obj,iTarget){

    

    clearInterval(obj.timer);

    

    obj.timer=setInterval(function(){

        if(obj.offsetHeight==iTarget){

            clearInterval(obj.timer);

        }

        else{

        speed=(iTarget-obj.offsetHeight)/10;

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

        obj.style.height=obj.offsetHeight+speed+'px';

        }

    },30)

};

</script>

</head>


<body>

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

</body>

</html>

这样就对了,把speed变化的代码写在定时器内部。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

感觉我和老师写的差不多啊怎么这么大问题啊,定时器还是一个感觉。。。大神帮我看下

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信