Images are not trailing mouse

Question

Я пытаюсь сделать изображение прикрепленным к мыши, и оно не отображается правильно, когда я наводил изображение. Мне нужно сделать так, чтобы предварительный просмотр изображения, который тянется мыши, и больше на предварительном просмотре мыши. Не могли бы вы мне помочь?

Вот скрипка:

https://jsfiddle.net/pgyt1qpg/1/

вот код:

document.querySelector('.container').addEventListener('mouseover', function(e) { 
    e.preventDefault(); 
    if (e.target.tagName === 'IMG') { 

    //create the div tag for preview 
    var myElement = document.createElement('div'); 
    myElement.className = 'preview'; 
    e.target.parentNode.appendChild(myElement); 
    //Create the image element for preview 
    var myImg = document.createElement('img'); 
    var imgLoc = e.target.src; 
    myImg.src = imgLoc; 

    myElement.style.left = e.offsetX + 15 + 'px'; 
    myElement.style.top = e.offsetY + 15 + 'px'; 
    myImg.style.width = "500px"; 
    myImg.style.height = "500px"; 
    myElement.style.zIndex = "-1"; 
    myElement.appendChild(myImg); 

    //When mouse goes out of the image delete the preview 
    e.target.addEventListener('mouseout', function handler(d) { 
     var myNode = d.target.parentNode.querySelector('div.preview'); 
     myNode.parentNode.removeChild(myNode); 
     e.target.removeEventListener('mouseout', handler, false); 
    }, false); 

    //place the image 15 inches to the bottom, right of the mouse 
    e.target.addEventListener('mousemove', function(f) { 
     myElement.style.left = f.offsetX + 15 + 'px'; 
     myElement.style.top = f.offsetY + 15 + 'px'; 
    }); 

    } 
}, false); 

UPDATE:

Я обновил скрипку (большое спасибо питер) и изображение теперь находится на правой стороне. Мне просто нужно приблизиться к мыши. Как мне это сделать?

Answer 1

Задача 1: Предварительный просмотр наведите курсор мыши, чтобы следовать за мышью.

Решение: Добавить относительное или абсолютное позиционирование.

myElement.style.position = 'absolute';

Задача 2: Получение парения предварительного просмотра, чтобы появиться над эскизами.

Solution (создает новую проблему, хотя): Поднимите z-index до 2.

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

Кроме того, вам необходимо настроить координаты отслеживания мыши, чтобы они соответствовали фактическому курсору. Это должно заставить вас двигаться, не стесняйтесь обновлять Fiddle и спрашивать, есть ли больше проблем.

Answer 2

Я не могу комментировать .. Но чтобы ответить на ваш последний вопрос в комментариях к ответу, я считаю, что вам нужно будет сделать что-то вроде this.

Вам необходимо обновить изображение, чтобы получить первоначальный размер.