現貨球類遊戲，縮放問題，jQuery

我想創造一個點球類遊戲，所以它會（最終）成爲踢球的球員的圖像，但球已被移除，玩家需要點擊球應該在哪裏。現貨球類遊戲，縮放問題，jQuery

第一個版本進行得很順利，很有效。

http://enjoythespace.com/sites/game/test.html

但我需要補充的是某種變焦讓您可以更準確地在那裏你點擊看到的。我被玩弄，並想出這個

http://enjoythespace.com/sites/v2/demo.html

但是，一旦你點擊它看起來很棒放大時，但是當你回去的圖像的路要走。

我認爲它是如何設置圖像的todo，#webpage是圖像原始大小的一半，#retina使用圖像的全尺寸。

任何幫助？

來源

2010-10-22 Josh Crowder

的望遠鏡的中心不上的像素的頂部中心的直接在它下面的圖片。例如如果你選擇圖像的中心，它的工作正常，但嘗試選擇左上角的「切換到全球版」 - 你不能，因爲它永遠不會在望遠鏡中心下。 – scunliffe 2010-10-22 10:21:21

那麼實現我想要做什麼的最佳方式是什麼？我不知道什麼切換到全球版意味着什麼？ – 2010-10-22 10:27:36

「切換到全球版」是樣本圖像左上方桃色背景上的文字。至於做什麼，我會嘗試調整頁面上使用的邏輯，以確保縮放區域居中正好在您正在放大的像素上方。 – scunliffe 2010-10-22 10:31:05

第一個問題是你沒有正確設置視網膜backgroundPosition。

此代碼的工作（我加了一個焦距可變，以明確如何改變變焦將改變計算，但它需要太多的其他變化）：通過檢查的四個角

/* Moving the retina div with the mouse 
    (and scrolling the background) */ 
zoom = 2.0; 
retina.css({ 
    left  : left - sizes.retina.width/2, 
    top  : top - sizes.retina.height/2, 
    backgroundPosition : ""+(-zoom*left+sizes.retina.width/2)+'px '+(-zoom*top+sizes.retina.height/2)+'px' 
});

測試此在視網膜上正確顯示，即當你在主圖像的角落時，角落應該位於視網膜中心。

第二個問題是，如果您調整瀏覽器的大小，位置計算已經結束，因爲偏移量變量未針對新大小進行更新。一種簡單的方法來做到這是把這個作爲webpage.mousemove（第一行），因此每一次的偏移量進行更新：

var offset = { left: webpage.offset().left, top: webpage.offset().top };

來源

2013-05-14 12:59:27 barny

看起來您正在傳遞縮放圖像的頂部/左側位置單擊點以突出顯示您點擊的位置。你需要做的是根據魚眼是否在圖像上來改變你的上/左位置。

未縮放的圖片是否必須是新聞頁面的一部分，還是可以作爲獨立圖片？

如果它可以是獨立的，那麼解決方案應該非常簡單。如果放大圖像的大小是未放大圖像的兩倍，那麼只要將高光的頂部/左側值設置爲放大後的值的一半即可。

jquery的職位將允許您準確地獲得該職位。

jQuery Position()

來源

2010-10-22 10:33:47

感謝詹姆斯，我根據魚眼改變了多少頂/左？那是我遇到的問題。它不一定是它的一部分，如果你看看我的原始演示，我只是想添加一個魚眼。有任何想法嗎？ – 2010-10-22 13:09:47

現貨球類遊戲，縮放問題，jQuery

回答

相關問題