Мышь в левой части экрана перемещает изображение влево, то же самое, когда мышь находится в правой части экрана. - PullRequest
Новая
       11

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

3 голосов
/ 15 октября 2011

Я пытаюсь получить изображение размером около 1920x1200px для панорамирования в окне браузера 800x600px. Поэтому, если моя мышь находится в верхнем левом углу окна браузера, изображение выравнивается, поэтому ее верхние левые поля находятся в верхнем левом углу окна браузера. То же самое касается нижнего правого.

Так что, если мышь находится в центре экрана, изображение также должно быть в центре.

Я не уверен, какие вычисления нужны, потому что моя математика немного ржавая.

В настоящее время я использую немного javascript, который просто перемещает изображение, используя свойства top / left 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/

1 Ответ

4 голосов
/ 15 октября 2011

Скрипка: 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.

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