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）：

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

背后的逻辑：

无法使用相对单位，因为图片大小以绝对单位指定。
偏移量应根据特定比率而变化，类似于：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";
    }
})();

屏幕左侧的鼠标将图像向左移动，鼠标在屏幕右侧时也是如此

1 个答案: