屏幕左側的鼠標將圖像移動到左側，當屏幕右側的鼠標移動時也一樣

Question

我正試圖在800x600px瀏覽器窗口中獲取大約1920x1200px的圖像。 因此，如果我的鼠標位於瀏覽器窗口的左上角，則圖像會相互匹配，因此左上角的邊距位於瀏覽器窗口的左上角。右側是同樣的情況。

所以如果鼠標位於屏幕的中心，圖像也應居中。

林不知道什麼計算需要，因爲我的數學有點生疏。

目前我正在使用一些JavaScript，只是使用CSS的頂部/左側屬性移動圖像，但沒有太大的成功，因爲它只是從左上角移動圖片。

我也將圖像的位置設置爲絕對的CSS。

function updateImgPosition(e) 
{ 
    var avatar = document.getElementById("avatar"); 
    // Width 
    var windowWidth = window.innerWidth; 
    var mouseWidthLocation = e.x; 
    var percentOfWidth = (100/windowWidth) * mouseWidthLocation; 

    // Height 
    var windowHeight = window.innerHeight; 
    var mouseHeightLocation = e.y; 
    var percentOfHeight = (100/windowHeight) * mouseHeightLocation; 


avatar.style.top = percentOfHeight + "%"; 
avatar.style.left = percentOfWidth + "%"; 


} 

document.onmousemove = updateImgPosition; 

這是什麼，我有一個演示：http://jsfiddle.net/uQAmQ/1/

Answer 1

小提琴：http://jsfiddle.net/uQAmQ/2/

不應該將絕對定位元素上沒有「鍋」，因爲窗口的寬度和高度根據圖像不斷變化。更平滑的解決方案涉及使用背景圖像。查看我的答案中間使用的邏輯。

(function(){ //Anonymous function wrapper for private variables 
    /* Static variables: Get the true width and height of the image*/ 
    var avatar = document.getElementById("avatar"); 
    var avatarWidth = avatar.width; 
    var avatarHeight = avatar.height; 
    var windowWidth = window.innerWidth; 
    var windowHeight = window.innerHeight; 

    /* Logic: Move */ 
    var ratioY = (avatarHeight - windowHeight)/windowHeight; 
    var ratioX = (avatarWidth - windowWidth)/windowWidth; 

    function updateImgPosition(e) { 

     var mouseY = e.pageX; //e.pageX, NOT e.x 
     var mouseX = e.pageY;   
     var imgTop = ratioY*(-mouseY); 
     var imgLeft = ratioX*(-mouseX); 
     document.body.style.backgroundPosition = imgLeft + "px " + imgTop + "px"; 

    } 

    /* Add event to WINDOW, NOT "document"! */ 
    window.onmousemove = updateImgPosition;  
})(); 

邏輯背後：

• 相對單位不能使用，因爲指定的圖像尺寸;

  考慮該JavaScript（在小提琴HTML + CSS讀取評論）絕對單位。

• 偏移量應根據特定的比例改變，其類似於：image size除以window size。
  但是，這個比例並不完整：圖像將在窗口的底部/左側消失。要解決此問題，請根據圖像大小減去窗口的大小。結果可以在變量ratioX和ratioY的代碼中找到。

  ---

  以前的代碼必須在window.onload事件中加載，因爲圖像的大小是動態計算的。出於這個原因，HTML元素也包含在正文中。

通過在代碼中指定背景的大小，可以將相同的代碼寫得更小更高效。看到這個改進的代碼。 小提琴：http://jsfiddle.net/uQAmQ/3/

(function(){ //Anonymous function wrapper for private variables 
/* Static variables: Get the true width and height of the image*/ 
    var avatarWidth = 1690; 
    var avatarHeight = 1069; 
    var windowWidth = window.innerWidth; 
    var windowHeight = window.innerHeight; 

/* Logic: Move */ 
    var ratioY = (avatarHeight - windowHeight)/windowHeight; 
    var ratioX = (avatarWidth - windowWidth)/windowWidth; 

function updateImgPosition(e) { 
    var mouseX = e.pageX; //e.pageX, NOT e.x 
    var mouseY = e.pageY;   
    var imgTop = ratioY*(-mouseY); 
    var imgLeft = ratioX*(-mouseX); 
    document.body.style.backgroundPosition = imgLeft + "px " + imgTop + "px"; 

} 
/* Add event to WINDOW, NOT "document"! */ 
window.onmousemove = updateImgPosition; 
})(); 

---

如果你不介意降低代碼的可讀性，下面的代碼是最好的解決方案，小提琴：http://jsfiddle.net/uQAmQ/4/：

(function(){ //Anonymous function wrapper for private variables 
/* Static variables: Get the true width and height of the image*/ 
    var windowWidth = window.innerWidth; 
    var windowHeight = window.innerHeight; 
    var ratioY = (windowHeight - 1069)/windowHeight; 
    var ratioX = (windowWidth - 1690)/windowWidth; 

    window.onmousemove = function(e) { 
     document.body.style.backgroundPosition = ratioX * e.pageX + "px " + ratioY * e.pageY + "px"; 
    } 
})();