多物体,不同目标值-慕课网

多物体,不同目标值

来源：4-1 JS多物体动画

周末00

2015-10-25 10:19

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多图动画</title>
    <style type="text/css">
    *{margin: 0;
        padding: 0;}
    ul,li{list-style: none;}
    li{width: 100px;
       height: 100px;
        background-color: red;
        margin-bottom: 50px;}
    </style>
    <script type="text/javascript">
    window.onload=function  () {
    var li=document.getElementsByTagName('li');
    var itarget=200;
        for (var i = 0; i < li.length; i++) {

            li[i].timer=null;
            
            li[i].onmouseover=function(){
                startmove(this,itarget);
            }
            li[i].onmouseout=function(){
                startmove(this,100);
            }
        itarget+=100;
        }

}
    function startmove (obj,itarget) {
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        obj.speed=Math.floor((itarget-obj.offsetWidth)/10);
        if (itarget==obj.offsetWidth) {
            clearInterval(obj.timer);
        } else{
            obj.style.width=obj.offsetWidth+obj.speed+'px';
        }
    },30)
    
}


    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

为什么三个物体的目标值都是400呢,怎么可以设置目标值为200,300,400,三个都不一样

写回答关注

2回答

Y_du: 2015-10-25 16:09:11

已采纳

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多图动画</title>
    <style type="text/css">
    *{margin: 0;
        padding: 0;}
    ul,li{list-style: none;}
    li{width: 100px;
       height: 100px;
        background-color: red;
        margin-bottom: 50px;}
    </style>
    <script type="text/javascript">
    window.onload=function  () {
    var itarget =200;
    var li=document.getElementsByTagName('li');
        for (var i = 0; i < li.length; i++) {
  
            li[i].timer=null;
            li[i].index = i ;
              
            li[i].onmouseover=function(){
                if(this.index == 0) { //这里的this.index就是li[i].index = i ;的赋值。
                    startmove(this, "200");
                } else if(this.index == 1){
                    startmove(this, "300");
                } else {
                    startmove(this, "400");
                }
            }
            li[i].onmouseout=function(){
                startmove(this,100);
            }
        itarget+=100;
        }
  
}
    function startmove (obj,itarget) {
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        obj.speed=Math.floor((itarget-obj.offsetWidth)/10);
        if (itarget==obj.offsetWidth) {
            clearInterval(obj.timer);
        } else{
            obj.style.width=obj.offsetWidth+obj.speed+'px';
        }
    },30)
      
}
  
  
    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

1 1

周末00

非常感谢!我这菜鸟实在是想不出来呀!

2015-10-25 16:49:08

共 1 条回复 >

Y_du: 2015-10-25 11:03:18

li[i].onmouseover=function(){

startmove(this,itarget);

}

在这改变itarget的值，因为你每次使用的都一样。所以才都是400.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多图动画</title>
    <style type="text/css">
    *{margin: 0;
        padding: 0;}
    ul,li{list-style: none;}
    li{width: 100px;
       height: 100px;
        background-color: red;
        margin-bottom: 50px;}
    </style>
    <script type="text/javascript">
    window.onload=function  () {
    var li=document.getElementsByTagName('li');
    var itarget=200;
        for (var i = 0; i < li.length; i++) {
 
            li[i].timer=null;
             
            li[i].onmouseover=function(){
                startmove(this,itarget);
                
                itarget = itarget + 100 ;
            }
            li[i].onmouseout=function(){
                startmove(this,100);
            }
        itarget+=100;
        }
 
}
    function startmove (obj,itarget) {
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        obj.speed=Math.floor((itarget-obj.offsetWidth)/10);
        if (itarget==obj.offsetWidth) {
            clearInterval(obj.timer);
        } else{
            obj.style.width=obj.offsetWidth+obj.speed+'px';
        }
    },30)
     
}
 
 
    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

这样写就可以每次都加100了

4 0

周末00 回复Y_du

额,那谢谢啦,我就是想不出来怎么改.

2015-10-25 11:37:56

共 4 条回复 >

JS动画效果

通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题

多物体的多运动