js运动 多物体运动含Json 但是里面数值不一样

<!doctype html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>未命题</title>
        <style>
            *{margin: 0;
                padding: 0;
            }
            #div1{
                height: 100px;
                width: 100px;
                background: red;
                margin-left: 200px;
                
            }
            
        </style>
        <script>
            window.onload = function ()
            {
                odiv1 = document.getElementById(‘div1‘);
                
                odiv1.onclick = function ()
                {
                    startMove(this,{
                        width:200,
                        height:300
                    }
                    ,10)
                }

                function startMove (obj,json,speed)
                {
                    clearInterval(obj.timer);
                    var icur = 0;

                    obj.timer = setInterval(function(){
                        var ibtn = true;

                        for(var attr in json)
                        {
                            var goal = json[attr];
                            if(attr == ‘opacity‘)
                            {
                                icur = Math.round(css(obj,‘opacity‘)*100);
                            }
                            else
                            {
                                icur = parseInt(css(obj,attr));
                            }


                            if(icur != goal)
                            {
                                ibtn = false;

                                if(attr == ‘opacity‘)
                                {
                                    obj.style.opacity = (iCur + iSpeed) / 100;
                                    obj.style.filter = ‘alpha(opacity=‘+ (iCur + iSpeed) +‘)‘;
                                }
                                else
                                {
                                    obj.style[attr] = icur + speed + ‘px‘;
                                }
                            }    
                        }

                        if(ibtn)
                        {
                            clearInterval(obj.timer);
                        }
                    },30);
                }

                function css(obj,attr)
                {
                    if(obj.currentStyle)
                        return obj.currentStyle[attr];
                    else
                        return getComputedStyle(obj,false)[attr];
                }

            }
        </script>    
    </head>
    <body>
        
        <div id="div1"></div>
        
        
    </body>    

</html>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。