純Javascript如何放大圖片在mousemove？

Question

我想在圖像內部創建onmousemove事件，然後在右側顯示放大的圖像。

問題：

1. 當我嘗試在圖像內鼠標移動，黑匣子和縮放圖像的閃爍。
2. 放大的圖像在黑匣子中不匹配。

我該怎麼做？可能計算錯誤。

這是我的代碼。

<div> 
    <div id="cursor" style="background:black; opacity:0.5; width:100px; height:100px; position:absolute; display:none"> 

    </div> 
    <div style="float:left;"> 
     <img id="img" src="http://www.animenewsnetwork.com/thumbnails/cover400x200/cms/news/102950/26902290903_3c8f2db0ea_b.jpg" onmousemove="getPos(event)" onmouseout="stopTracking()"/> 
    </div> 
    <div id="zoom" style="width:300px; height:300px; zoom:1; float:left;"> 
     qwe 
    </div> 
</div> 
<script> 
    function getPos(e){ 
     var x = e.clientX; 
     var y = e.clientY; 
     var width = document.getElementById("img").clientWidth; 
     var height = document.getElementById("img").clientHeight; 

     document.getElementById("cursor").style.left = x - 50; 
     document.getElementById("cursor").style.top = y - 50; 
     document.getElementById("cursor").style.display = "inline-block"; 

     document.getElementById("zoom").style.background = "url('http://www.animenewsnetwork.com/thumbnails/cover400x200/cms/news/102950/26902290903_3c8f2db0ea_b.jpg') "+x/width * 100+"% "+y/width * 100+"%"; 
    } 

    function stopTracking(){ 
     document.getElementById("cursor").style.display = "none"; 
     document.getElementById("zoom").style.background = "transparent"; 
    } 
</script> 

Thanks in Advanced。

Answer 1

我加了半秒的時間延遲，閃爍消失了。

function getPos(e){ 


    var delay=500; //1/2 second 

    setTimeout(function() { 
     //your code to be executed after 1/2 second 
    var x = e.clientX; 
    var y = e.clientY; 
    var width = document.getElementById("img").clientWidth; 
    var height = document.getElementById("img").clientHeight; 

    document.getElementById("cursor").style.left = x - 50; 
    document.getElementById("cursor").style.top = y - 50; 
    document.getElementById("cursor").style.display = "inline-block"; 
    document.getElementById("zoom").style.background = "url('http://www.animenewsnetwork.com/thumbnails/cover400x200/cms/news/102950/26902290903_3c8f2db0ea_b.jpg') "+x/width * 100+"% "+y/width * 100+"%"; 
    }, delay); 


}