html





    

        
    
    






css
.demo{ width:350px;margin:250px auto; text-align:left; padding:0; }
#p{border:1px solid #ccc; width:350px; height:350px; position:relative;cursor: pointer; }
.small_pic{ background:#eee; position:relative; }
.small_pic img{ position:absolute;top: 0;left: 0; width:350px; height:350px; z-index:1;}

js

 (function(){
        var p = document.getElementById('p');
        var img = p.getElementsByTagName('img')[0];
        p.onclick = function(){
            act(img, {width : 500, height : 500, top : -80, left : -80}, function(){
                alert('动画已经完成!');
            });
        }
        function css(obj, attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
        function act(obj, json, fn){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var stop = true;
                for(var p in json){
                    var value = json[p];
                    var cur = parseInt(css(obj, p));
                    var speed = (value - cur) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if(cur != value){
                        stop = false;
                        obj.style[p] = cur + speed + 'px';
                    }
                }
                if(stop){
                    clearInterval(obj.timer);
                    obj.timer = null;
                    fn && fn();
                }
            }, 30);
        }
    }());

这是我看别人写的一个例子，我不懂的一点是假如某一个属性到了目标值，那不就是直接把定时器关了吗？那别的属性怎么到达目标值？还是说都是同时到达目标值的？