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>

 

posted @ 2015-03-10 23:23  mayufo  阅读(135)  评论(0)    收藏  举报