与屏幕右侧的鼠标相同

与屏幕右侧的鼠标相同

本文介绍了屏幕左侧的鼠标将图像向左移动,与屏幕右侧的鼠标相同的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试获取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.
    但是,该比率不完整:图像会消失在窗口的左下角.要解决此问题,请从图像大小中减去窗口的大小.结果可以在代码中的变量ratioXratioY处找到.
    先前的代码必须在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";
    }
})();

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

09-04 21:50