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

问题描述

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

I'm trying to get an image that is around 1920x1200px to pan around on a 800x600px browser window.So if my mouse is on the top-left of the browser window the image is alined so it's top-left margins are on the top-left of the browser window. The same goes for the bottum-right.

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

So if the mouse is in the centre of the screen the image should be centered too.

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

Im not sure what calculations are needed as my math is a bit rusty.

目前，我使用的是一些JavaScript，仅使用CSS的top/left属性移动图像，但没有成功，因为它只是从顶部/左侧角移动图片.

Currently I'm using a bit of javascript that just moves the image using CSS's top/left properties but without much success as it's just moving the picture around from it's top/left corner.

我还将图像的位置设置为css中的绝对位置.

I'v also set the image's position to absolute in 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/

This is a demo of what I have: http://jsfiddle.net/uQAmQ/1/

推荐答案

提琴: http://jsfiddle.net/uQAmQ/2/

Fiddle: http://jsfiddle.net/uQAmQ/2/

您不应在绝对定位元素上平移"，因为窗口的宽度和高度会根据图像不断变化.较平滑的解决方案涉及使用背景图像.有关使用的逻辑，请参见我的答案的中间部分.

You should not "pan" on an absolutely positioned element, because the window's width and height keep changing according to the image. A smoother solution involves using a background image. See the middle of my answer for the used logic.

考虑以下JavaScript(阅读注释； HTML + CSS放在小提琴中):

Consider this JavaScript (read comments; 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元素.

• Relative units cannot be used, because the image size is specified in absolute units.
• The offsets should change according to a specific ratio, which is similar to: image size divided by window size.
  However, this ratio is not complete: The image would disappear at the bottom/left corner of the window. To fix this, substract the window's size from the image's size. The result can be found in the code at variable ratioX and ratioY.

  ---

  The previous code had to be loaded at the window.onload event, because the image's size was dynamically calculated. For this reason, a HTML element was also included in the body.

通过指定代码中背景的大小，可以将同一代码编写得更小，更有效.请参阅此改进的代码. 提琴: http://jsfiddle.net/uQAmQ/3/

The same code can be written much smaller and efficient, by specifying the size of the background in the code. See this improved code. 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;
})();

---

如果您不介意降低代码的可读性，则以下代码是最佳解决方案，提琴: http://jsfiddle.net/uQAmQ/4/ :

---

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

这篇关于屏幕左侧的鼠标将图像向左移动，与屏幕右侧的鼠标相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！