3

我正在尝试获取大约 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/

4

1 回答 1

4

小提琴：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;    
})();

其背后的逻辑：

  • 不能使用相对单位，因为图像大小是用绝对单位指定的。
  • 偏移量应根据特定比率变化，类似于：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;
})();

如果您不介意代码可读性降低，以下代码是最好的解决方案，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";
    }
})();
于 2011-10-15T10:08:20.230 回答