從中心放大絕對定位的div

-3

在頁面上也會有一些按鈕。當這些被點擊時，不同的變量會觸發，縮小和增長這些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的中心點。我見過的唯一解決方案似乎過於複雜。

我想我可以在jQuery中添加一半divs寬度的負邊距來抵消這個問題？我會嘗試，如果沒有更好的解決方案

感謝您的任何幫助。

來源

2014-09-02 bboybeatle

這將是最好的，如果你能在HTML的[的jsfiddle（http://www.jsfiddle.net）以及添加一些片段和CSS來重新創建這個你題。 – misterManSam 2014-09-02 11:51:54

我從來沒有用過jsfiddle，我確定它很簡單，但我稍微有點時間緊迫。問題中的鏈接包含一個非常基本的例子。我會將我的jquery添加到問題中，謝謝 – bboybeatle 2014-09-02 12:04:20

您的負面利潤率想法對我來說似乎很好。 [在這個基本的例子中，它運行良好]（http://jsbin.com/sugiwirekeko/1/edit）。點擊球。 – misterManSam 2014-09-02 12:08:59

bboybeatle，你的「一半divs寬度的負邊界」的想法是現貨，而且一點都不難實現。只需在兩個動畫中包含所需的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需要一個插件來激活顏色。

來源

2014-09-02 14:42:52

非常感謝@ Roamer-1888，我實際上使用了一些變量來使它更容易應用邊距。我會記得把多個CSS屬性的變量的這種技術..

繼承人我的代碼片段最後我用...

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

來源

2014-09-02 15:39:24 bboybeatle

只是爲了好玩我放在一起有點FIDDLE有一個函數，它傳遞一個元素名稱，中心的x和y座標，並將元素放置在較大的元素中。

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' 
        }); 

}

來源

2014-09-02 18:08:55 TimSPQR

從中心放大絕對定位的div

回答

相關問題