在視口中居中一個點/ div

我們將div設置爲背景大圖。大多數情況下的背景圖像會比div大。因此div背景平底鍋。（請參閱Fiddle）。在視口中居中一個點/ div

圖像是一個帶有房間的平面圖。
房間由某些位置（x，y）的標記表示。（例如，在未示出現在）

<div class="bg-img"></div> 

<p> 
    <input type="button" value="center on a point" id="center"/> 
</p> 

div.bg-img { 
    background-image: url(http://www.bumc.bu.edu/supportingbusm/files/2012/01/Typical-Floor-Plan.jpg); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    background-color: blue; 
    border: 1px solid #aaa; 
    width: 450px; 
    height: 450px; 
    margin: 25px auto;   
}

Fiddle for the same is here

用於移動DIV背景的代碼是@jQuery - drag div css background

我們想要的是內居中的已知點（x，y）的視口中的圖像。（或以視點爲中心觀察點？）

點（x，y）將是房間的位置。當用戶點擊列表中的任何房間時，視口應平移到房間的位置。所有房間都有一些預先定義的（x，y）位置（類似於谷歌地圖在標記位置的中心地圖）。另外，如果房間/地點位於地圖的邊緣，則將其帶入視口也足夠了。

無法弄清楚如何居中視口部分。任何線索？

注1：在下面的例子中，用戶點擊「3房」和「3室」被搖動到視圖和在視口中居中。

注2：房間3未精確顯示在視口的中心（假設爲），僅用於清晰粗略圖片。示例中也未顯示房間標記。

If room 3 is clicked

Fiddle for the same is here

來源

2013-05-27 Amitd

你可能會想設置背景位置的X和Y座標center.x - point.x和center.y - point.y，分別。例如，如果背景圖像寬100px，高200px，則center.x爲50，center.y爲50.因此，如果要定位背景圖像以使位置（75,75）居中，則背景圖像將位置（-25px，-25px）拉到左邊，使得75px到右邊，75px下來現在在左邊50px和下邊50px，相對於視口。

來源

2013-05-27 20:07:29 Kyle

thx我會試一試並回復你 – Amitd

我認爲你的代碼中有大部分的代碼，但如果你需要更多的代碼，我可以提供更多的細節。 – Kyle

對於遲到的回覆感到抱歉..我試過這種方式http://jsbin.com/izihec/1/edit ..似乎是工作..有什麼我可以改進？請參閱工作示例http://jsbin.com/izihec/1/edit – Amitd

在視口中居中一個點/ div

回答

相關問題