屏幕左侧的鼠标将图像移动到左侧，当屏幕右侧的鼠标移动时也一样

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"; 
    } 
})();