使用js动态设置元素定位属性为鼠标坐标时元素会间歇性抖动

Question

var x,y,pos;
$('#zoom_preview').mousemove(function(e){
    x = Math.round(e.offsetX);
    y = Math.round(e.offsetY);
    document.getElementById('zoom_window').style.left = x + "px";
    document.getElementById('zoom_window').style.top = y + "px";
$('.test').html("x="+x+" y="+y);
});

<div id="zoom_preview" style="width:360px;height:360px;position: relative;">
    <div id="zoom_window" style="width: 50%;height: 50%;background-color:lightblue;opacity: 0.6;position: absolute;"></div>
</div>
<div class="test"></div>

这段代码是尝试写放大镜功能的,如果不设置zoom_window的定位属性left和top的话还可以正确获取到e返回的offset,一旦设置了zoom_window的定位属性,页面效果就是zoom_window不能正确被设置成e返回的offset,随机性地会弹到错误位置

口头描述不清楚,我再追加个渣图展示一下这个鬼畜