                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

多物体,不同目标值

<!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,三个都不一样

周末00

2015-10-25

源自：JS动画效果 4-1

关注问题我要回答

672

操作

收起

2 回答

Y_du 回答被采纳 +3 积分
2015-10-25

<!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 回复有任何疑惑可以回复我~

收起回答

周末00 提问者

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

2015-10-25 回复有任何疑惑可以回复我~

Y_du
2015-10-25

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了

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

收起回答

周末00 提问者

效果不一样呀,你试试,我的效果是目标分别是200,300,400.按照顺序来的,你的不安顺序,而且鼠标每次在不同图片上滑动都会增加100的.

2015-10-25 回复有任何疑惑可以回复我~

周末00 提问者

滑动第一幅目标200,第二幅300,第三幅400.而且每次随意滑动都是这些效果

2015-10-25 回复有任何疑惑可以回复我~

Y_du 回复周末00 提问者

我只是提供思路。至于你要实现怎样的需求就自己改吗。按你说的你就判断鼠标现在移动到哪个LI上，传不同的参数不就行了。

2015-10-25 回复有任何疑惑可以回复我~

查看1条回复

0/150

提交

取消

JS动画效果

参与学习 113926 人
解答问题 1443 个

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

进入课程

本课相似问答

2 回答多物体的多运动

1 回答多物体运动鼠标移出事件有误

2 回答关于多物体运动课程

2 回答多物体运动传入obj问题

2 回答多物体改变是单物体运动，各路大神看下错了那

搜索更多本课相关问答

多物体,不同目标值

我要回答关注问题

热搜

最近搜索清空

多物体,不同目标值

2 回答

本课相似问答

多物体,不同目标值