javascript-屏幕左侧的鼠标将图像向左移动,与屏幕右侧的鼠标相同

我正在尝试获取大约1920x1200px的图像以在800x600px的浏览器窗口中平移.
因此,如果我的鼠标位于浏览器窗口的左上角,则该图像会掉线,因此其左上角的边距位于浏览器窗口的左上角.右下角也是如此.

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

由于我的数学有点生疏,我不确定需要什么计算.

目前,我正在使用一些javascript,它仅使用CSS的top / left属性移动图像,但没有成功,因为它只是从左上角移动图片.

我还将图像的位置设置为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/

解决方法:

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

其背后的逻辑：

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

标签：onmousemove,javascript
来源： https://codeday.me/bug/20191102/1988889.html