Question

我试图在图像的鼠标移动事件上得到x和y坐标

现在我认为有两种情况对于获得精确的坐标至关重要

注意：我还需要将zoomer放在图像悬停
上
如果要应用zoomer，则必须以较少的图像显示图像   高度和宽度div比原始宽度和高度

在第一种情况下，我将按原样显示图像，没有任何高度和宽度限制

但在这种情况下，我将无法按上述说明

中所述应用zoomer

假设我有像素2000x1500的图像，那么下面的代码工作非常顺利

var mouseMove = function(e) {
    var X = Math.round((e.pageX - img.offset().left);
    var Y = Math.round((e.pageY - img.offset().top));
};

在第二种情况下，我将以固定宽度和高度div显示图像，该图像将小于图像宽度和高度

假设div宽度和高度为850x750，并且您在该div中显示尺寸为2000x1500的图像

现在要获得精确的x和y坐标代码

$(document).ready(function() {  
    $('#competition').on('load', function(e) {
        naturalWidth = e.target.naturalWidth;
    });
});

var mouseMove = function(e) {
    var img = $('#competition');    // div in which image is loaded

    // naturalWidth is origional width of image
    // img.width() is width of div

    ratio = (naturalWidth / img.width());
    var X = Math.round((e.pageX - img.offset().left) * ratio);
    var Y = Math.round((e.pageY - img.offset().top) * ratio);
};

现在第二种情况发生的情况是，当我水平移动鼠标时，它会在x坐标的每次鼠标移动事件后给出3像素差异，如1 4 7 10 13

但我想捕捉图像的每一个像素

任何帮助都会被大大接受......

在鼠标上方获取x和y坐标图像

0 个答案: