鼠标在屏幕左侧移动图像向左移动，鼠标在屏幕右侧移动时相同

Question

我正在尝试获取大约 1920x1200px 的图像，以在 800x600px 的浏览器窗口上平移。 因此，如果我的鼠标位于浏览器窗口的左上角，则图像会对齐，因此它的左上角边距位于浏览器窗口的左上角。右下角也是如此。

因此，如果鼠标位于屏幕中央，则图像也应该居中。

我不确定需要什么计算，因为我的数学有点生疏。

目前，我正在使用一些 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/

你不应在绝对定位元素上“平移”，因为窗口的宽度和高度会根据图像不断变化。更平滑的解决方案涉及使用背景图像。请参阅我的答案的中间部分以了解所使用的逻辑。

考虑这个 JavaScript（阅读评论；HTML + CSS at fiddle）：

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

其背后的逻辑：

• 不能使用相对单位，因为图像大小是用绝对单位指定的。
• 偏移量应根据特定比率变化，类似于：图像大小除以窗口大小。
  但是，这个比率不完整：图像会在窗口的左下角消失。要解决此问题，请从图像大小中减去窗口大小。结果可以在变量 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;
})();

---

If you don't mind a decreased code readability, the following code is the best solution, Fiddle: 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";
    }
})();