Центрирующий эффект

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

.

Answer 2

Следующий jsFiddle будет центрировать один прямоугольник внутри другого, а при изменении его размера он будет центрироваться в родительском контейнере.Я думаю, что это тот эффект, которого вы пытаетесь достичь.Я использую отрицательные поля, чтобы центрировать внутреннюю рамку.Для любой высоты / ширины, которую вы используете, просто установите поле равным половине ширины / высоты.

http://jsfiddle.net/G8Ste/594/

РЕДАКТИРОВАТЬ:

Я обновил вышеупомянутый jsFiddle дообрабатывать относительные размеры.Внутри функции mousedown есть 2 переменные, которые определяют масштаб окна.scaleDown - это процент от исходного размера, до которого вы хотите уменьшить масштаб при MouseDown, а масштабирование - это процент от исходного размера, до которого вы хотите увеличить масштаб при использовании mouseUp.Это должно работать для блоков любого размера, так как все значения вычисляются вместо жестко заданного кода.

http://jsfiddle.net/G8Ste/600/

EDIT2:

Код теперь проверяет, используется ли полеанимация при нажатии несколько раз быстро.Код будет ждать, пока предыдущая анимация не будет завершена, прежде чем снова выполнить анимацию.

http://jsfiddle.net/G8Ste/601/

EDIT3:

http://jsfiddle.net/G8Ste/613/

Обновлен еще раз досделать его более отзывчивым.Я преобразовал код в плагин под названием centeringEffect.

Использование

$ ('ИЗОБРАЖЕНИЯ'). CenteringEffect ();

Параметры

scaleDown: процент, в котором вы хотите уменьшить масштаб изображения при mouseDown (по умолчанию: .6) scaleUp: процент, в котором вы хотите масштабировать изображение при mouseUp (по умолчанию: .6)

Answer 3

http://jsfiddle.net/AJ66C/2/

изменение css слева: 20px; слева: 50 пикселей; рассчитать центр как ширину / 2 + сверху или слева (он должен оставаться одинаковым все время)

$('#myimage').mousedown(function() {
        var img = $(this);
        img.stop().animate({
            width: ['80px', 'swing'],
            height: ['80px', 'swing'],
           top: ['60px', 'swing'],
            left: ['60px', 'swing'],
         }, 50, 'swing');
        $(document).one("mouseup", function(){
            img.stop().animate({
                width: ['150px', 'swing'],
                height: ['150px', 'swing'],
                top: ['25px', 'swing'],
                left: ['25px', 'swing'],
           }, 150, 'swing', function() {
                $(this).animate({
                    width: ['50px', 'swing'],
                    height: ['50px', 'swing'],
                top: ['75px', 'swing'],
                left: ['75px', 'swing'],
                 }, 1000, 'swing');
            });
        });
    });

Answer 4

Похоже, вы должны использовать Масштаб

Answer 5

Вам нужно анимировать левый и верхний поля, я думаю ... что-то вроде этого:

$('#myimage').mousedown(function() {
    var img = $(this);
    img.stop().animate({
        width: ['80px', 'swing'],
        height: ['80px', 'swing'],
        marginTop: ['20px', 'swing'],
        marginLeft: ['20px', 'swing'],
    }, 50, 'swing');
    $(document).one("mouseup", function(){
        img.stop().animate({
            width: ['150px', 'swing'],
            height: ['150px', 'swing'],
                marginTop: ['10px', 'swing'],
                marginLeft: ['10px', 'swing'],
        }, 150, 'swing', function() {
            $(this).animate({
                width: ['100px', 'swing'],
                height: ['100px', 'swing'],
                marginTop: ['15px', 'swing'],
                        marginLeft: ['15px', 'swing'],
            }, 1000, 'swing');
        });
    });
});

Обратите внимание, что введенные значения почти наверняка не верны ...

Answer 6

Вы используете эффект ослабления колебаний.Не существует никакого эффекта ослабления из коробки, который имеет желаемое поведение.Я вижу только то, что вы пишете свой собственный эффект ослабления, основанный на алгоритме свинга.