无法执行链式运动，还报错了-慕课网

无法执行链式运动，还报错了

来源：6-2 完美运动框架

慕丝0963956

2017-09-04 16:14

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>多物体运动</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        li{list-style:none;width: 200px;height: 100px;background: black;margin-bottom: 20px;border: 1px solid #f00;
            filter: alpha(opacity:30);opacity: 0.3;}
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var li=document.getElementsByTagName('li');
            for(var i=0;i<li.length;i++){
                li[i].timer=null;
                li[i].onmouseover=function(){
                    startMove(this,{width:400,height:200},function(){
                        startMove(this,{opacity:100});
                    });
                }
                li[i].onmouseout=function(){
                    startMove(this,{width:200,height:100,opacity:30});
                }
            }
            function getStyle (obj,attr){ return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }

            function startMove(obj,json,fn){
                
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    var iFlag=true;//假设所有运动都到达目标
                    for(var attr in json){

                    //1.取当前值
                    var icur=0;
                    attr=='opacity'? icur=Math.round(parseFloat(getStyle(obj,attr))*100) : icur=parseInt(getStyle(obj,attr));
                    //2.计算速度
                    var speed=(json[attr]-icur)/10;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    //3.检测停止
                    if(icur!=json[attr]){
                        iFlag=false;
                    }
                    if(attr=='opacity'){
                            obj.style.filter='alpha(opacity:'+icur+speed+')';
                            obj.style.opacity=(icur+speed)/100;
                        }else{
                            obj.style[attr]=icur+speed+'px';
                        }                    
                    }
                    if(iFlag){
                        clearInterval(obj.timer);
                        fn && fn();
                    }
                },30)

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

哪位兄弟帮我看下

写回答关注

2回答

_Rainy

2017-12-30 19:21:38

getComputedStyle( obj )[attr]; }需要flase，getComputedStyle要两个参数

0 0
qq_東風破_0

2017-09-05 07:57:14

getComputedStyle( obj,false )[attr]第27行加上‘,false’

2 0

慕丝0963...

我试过了不行啊，你加了可以实现链式运动吗？

2017-09-05 11:48:26

共 2 条回复 >

JS动画效果

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

113910 学习 · 1502 问题

查看课程

相似问题

加了flag判断后，不能执行链式运动了？

回答 2

求助：为啥只能执行单个运动，不能执行链式运动

回答 1

链式运动的回调函数不执行

回答 2

链式的运动不了

回答 8

为什么同时运动可以了，而链式运动就不行了？

回答 2

打开慕课网App查看更多内容