Масштаб абсолютно расположенного div от центра

Question

У меня есть несколько divs, расположенных абсолютно на фоновом изображении.

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

Вот Javascript настоящее время я использую ...

$(document).ready(function() { 

var title = 1; 

$(".button1").click(function() { 
title = 1; 
}); 

$(".button2").click(function() { 
title = 2; 
}); 

$(document).click(function(e) { 
    console.log(title); 
     if (title==1){ 
      $('.london').animate({ backgroundColor:'green', width:'50', height:'50' }, 300); 
     } else if (title==2){ 
      $('.london').animate({ backgroundColor:'red', width:'40', height:'40' }, 300); 
     } 


}); 

}); 

Поскольку они абсолютно позиционированы они масштабируются от угла они позиционируются с.

см. Пример here.

Что мне нужно сделать, это сжать и развить эти divs от их центральной точки. Единственные решения, которые я видел, кажутся слишком сложными.

Я думаю, я мог бы добавить отрицательный запас половины ширины divs в jQuery, чтобы противодействовать этому? Я попробую, если нет лучших решений.

Спасибо за любую помощь.

Answer 1

bboybeatle, ваш идеал «отрицательный запас половины ширины дивизиона» находится на месте и совсем не сложно реализовать. Просто укажите необходимые настройки marginTop и marginLeft в двух анимациях.

$(function() { 
    var cssMap1a = { 
     backgroundColor: 'green' 
    }; 
    var cssMap1b = { 
     width: 50, 
     height: 50, 
     marginTop: -10, 
     marginLeft: -10 
    }; 
    var cssMap2a = { 
     backgroundColor: 'red' 
    }; 
    var cssMap2b = { 
     width: 30, 
     height: 30, 
     marginTop: 0, 
     marginLeft: 0 
    }; 

    $(".button1").click(function() { 
     $('.london').css(cssMap1a).animate(cssMap1b, 300); 
    }); 
    $(".button2").click(function() { 
     $('.london').css(cssMap2a).animate(cssMap2b, 300); 
    }); 
}); 

А вот fiddle. Стенды не сложно настроить. Надеюсь, это поможет вам в следующий раз, когда вам нужно задать вопрос здесь.

Как вы увидите:

• «Лондон» и кнопки перемещаются в более выгодное положение для демонстрационных целей
• Изменения цвета разделены, как отдельные карты CSS. Они не работали на скрипке при включении в карты анимации. jQuery нужен плагин для анимации цветов.

Answer 2

Большое спасибо за это @ Roamer-1888, я фактически использовал некоторые переменные, чтобы немного упростить применение маржи. Я буду помнить, что методика ввода нескольких свойств CSS в переменной ..

Heres фрагмент моего кода, я закончил с использованием ...

londonMargin = london/2 - london; 
$('.london').animate({ width:london, height:london, marginLeft:londonMargin, marginBottom:londonMargin }, 300); 

Answer 3

Просто для удовольствия я собрал немного FIDDLE, который имеет функцию, с которой вы передаете имя элемента, координаты x и y центра и позиционируете элемент в большем элементе.

JS

var myelement = $('.boxdiv'); 
var myelement2 = $('.boxdiv2'); 

putmycenter(myelement, 90, 90); 
putmycenter(myelement2, 160, 280); 


function putmycenter (element, x, y) 
{ 
    var boxdivxcentre = element.width()/2; 
    var boxdivycentre = element.height()/2; 
    var boxdivposx = (x - boxdivxcentre); 
    var boxdivposy = (y - boxdivycentre); 
    element.css({ 
        "top" : boxdivposy + 'px', 
        "left" : boxdivposx + 'px' 
        }); 

}