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

Question

我试图让一张大约 1920x1200 像素的图像在 800x600 像素的浏览器窗口中四处移动。因此，如果我的鼠标位于浏览器窗口的左上角，则图像被排列成直线，因此它的左上角边距位于浏览器窗口的左上角。右下角也是如此。

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

我不确定需要进行哪些计算，因为我的数学有点生疏。

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

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

背后的逻辑:

• 不能使用相对单位，因为图像大小是以绝对单位指定的。
• 偏移量应根据特定比例变化，类似于:图像大小 除以 窗口大小。
  然而，这个比例并不完整:图像会在窗口的底部/左 Angular 消失。要解决此问题，请从图像大小中减去窗口大小。结果可以在变量 ratioX 和 ratioY 的代码中找到。

  ---

  之前的代码必须在 window.onload 事件中加载，因为图像的大小是动态计算的。为此，正文中还包含一个 HTML 元素。

通过在代码中指定背景的大小，可以将相同的代码编写得更小、更高效。请参阅此改进代码。 fiddle :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;
})();

---

如果您不介意降低代码可读性，下面的代码是最好的解决方案， 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";
    }
})();