Мышь слева от экрана перемещает изображение влево, то же самое, когда мышь справа от экрана

Question

Я пытаюсь получить изображение размером около 1920x1200 пикселей для панорамирования в окне браузера 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

Fiddle: 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 также был включен в тело.

Этот же код можно записать гораздо меньше и эффективно, указав размер фона в коде. См. Этот улучшенный код. 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; 
})(); 

---

Если вы не возражаете пониженную читаемость кода, следующий код является лучшим решением, 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"; 
    } 
})();