jquery - 中心效应

Question

我有以下代码:

http://jsfiddle.net/G8Ste/577/

但我希望效果是全方位的，而不是仅仅向右和底部。

我已经尝试过 margin: 0、auto 和其他 css 和 html 样式，将其与中心对齐，但它不起作用。

谢谢

Answer 1

$('#myimage').mousedown(function() {
    var img = $(this);
    img.stop().animate({
        left: ['30px', 'swing'],   // left + (width - new width)/2
        top: ['60px', 'swing'],    // top + (height - new height)/2
        width: ['80px', 'swing'],
        height: ['80px', 'swing'],
    }, 50, 'swing');
    $(document).one("mouseup", function(){
        img.stop().animate({
            left: ['-5px', 'swing'], // left - (new width - width)/2
            top: ['25px', 'swing'],  // top - (new height - height)/2
            width: ['150px', 'swing'],
            height: ['150px', 'swing'],
        }, 150, 'swing', function() {
            $(this).animate({
                left: ['20px', 'swing'],
                top: ['50px', 'swing'],
                width: ['100px', 'swing'],
                height: ['100px', 'swing'],
            }, 1000, 'swing');
        });
    });
});

http://jsfiddle.net/diode/G8Ste/598/

编辑:

要使其适用于类为 myimage 的所有图像，请执行以下操作 一开始通过运行一次存储所有图像的初始属性

$(".myimage").each(function(i, img){ 

    $(img).data("width", $(img).width()); 
    $(img).data("height", $(img).height());
    $(img).data("left", parseInt($(img).css("left"),10)); 
    $(img).data("top", parseInt($(img).css("top"),10));

});

然后在 mousedown 处理程序中

var img = $(this);

var ww = img.data("width"); 
var hh = img.data("height");
var left = img.data("left"); 
var top = img.data("top");

// then same code as last jsfiddle

.