圖像不是尾隨鼠標

我想讓圖像連接到鼠標，並且當我將鼠標懸停在圖像上時它不能正確顯示。我需要這樣做，以便拖動鼠標的圖像預覽在鼠標預覽中更大。請你幫助我嗎？圖像不是尾隨鼠標

這裏是小提琴：

這裏是代碼：

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：

我已經更新了小提琴（非常感謝彼得）和圖像現在在右側。我只需要讓它靠近鼠標。我該如何去做呢？

來源

2016-02-28 HawkBlade124

什麼不起作用？具有相對路徑的圖像將不會在小提琴中加載... – Rayon

圖像不會在鼠標懸停時和我的文件中跟隨鼠標，頂部圖像的預覽位於中間圖像的後面。 – HawkBlade124

問題1：讓懸停預覽跟隨鼠標。

解決方案：添加相對或絕對定位。

myElement.style.position = 'absolute';

問題2：獲取懸停預覽顯示縮略圖的上方。

解決方案（儘管創造了新的問題）：提高z-index爲2

這將創建懸停預覽中斷懸停事件在縮略圖顯示時的問題。您可以通過檢查mouseout事件中的鼠標座標並查看它們是否實際位於所選觸發縮略圖的邊界之外來解決此問題。如果它們不是，則關閉預覽，因爲這只是中斷。還有其他方法可以做到這一點，但您對座標看起來很舒服，所以纔想到這一點。

此外，您需要調整鼠標跟蹤座標，使其與實際光標更好地對齊。這應該讓你感動，隨時更新小提琴並詢問是否還有更多問題。

來源

2016-02-28 03:18:09

我更新了小提琴，圖像位於鼠標的右側，完美地跟隨鼠標。我需要的是，圖片的右側15像素，鼠標下方15像素。當我改變兩個偏移量上的像素時，它都不起作用。我究竟做錯了什麼？ – HawkBlade124

http://stackoverflow.com/questions/7790725/javascript-track-mouse-position –

好吧，我通讀了，我想，爲了改變圖像的位置，所以它被設置爲15px的權利，底部是15px，我需要使用'pageX和pageY'的值嗎？ – HawkBlade124

我無法評論..但要回答你在答案的評論中的最後一個問題，我相信你將不得不做一些事情，如this。

您將不得不重新加載圖片才能獲得原始尺寸。

來源

2016-02-28 05:10:49 fqhv

謝謝，我欣賞它！我已經達到了圖像跟隨鼠標的地步，但我需要讓圖像更接近鼠標。我怎麼做？ – HawkBlade124

圖像不是尾隨鼠標

回答

相關問題