Javascript 在图像上留下点

我想留下一个点在我的网格图像的基础上，无论我点击。我已经记下了一般的概念，但不幸的是，我的圆点一直比我点击的地方略高。我该如何调整这个呢

#图像持有者：悬停{
光标：十字线；
}
文章
在一边
图形
页脚，
标题，
hgroup，
菜单，
导航，
部分{
显示：块；
}
#影像夹组{
显示：无；
背景色：黑色；
位置：绝对位置；
}
#图像支架{
位置：相对位置；
显示：内联块；
溢出：隐藏；
}
#垂直的{
宽度：2.5px；
身高：100%；
}
#水平的{
宽度：100%；
高度：2.5px；
}
一些文本
其他一些文本
$（'imageholder img'）。在（'click'，null，[$（'imageholder水平'），$（'imageholder img'）]，函数（e）{
e、 数据[1].css（'left'，e.offsetX==未定义？e.originalEvent.layerX:e.offsetX）；
e、 数据[0].css（'top'，e.offsetY==未定义？e.originalEvent.layerY:e.offsetY）；
$（'#imageholder'）。单击（函数（事件）{
var hor=event.offsetX+4.15，
ver=event.offsetY+4；
$（“.marker”）.remove（）；
$（“正文”）。附加(
$（''）.css({
位置：'绝对'，
顶部：ver+‘px’，
左：hor+‘px’，
宽度：“10px”，
高度：“10px”，
背景：“#5b5e5f”
})
);
});
e、 数据[0]。显示（）；
e、 数据[1]。显示（）；
$（文档）.ready（函数（）{
$（'#imageholder'）.mouseover（函数（）{
$（“.marker”）.css（“框阴影”，“0.0 3pxRGBA（0,0,0,0.5）”）；
});
$（'#imageholder'）.mouseout（函数（）{
$（“.marker”）.css（“框阴影”、“无”）；
});
});
});

问题在于，您使用的是网格内的x和y坐标，但随后相对于页面进行定位

修复方法是通过将标记附加到

imagegrid

元素来相对于网格定位

我给了

#horizontal

和

#vertical

一个公共类，以便使

#imagegrid div

样式规则更具体

然后我更改了

$（'body'）。将
附加到
$（'#imagegrid'）。附加
，最后在两个维度上减去8个像素以使点居中

更新的JavaScript:

$("#imageholder").append(
  $('<div class="marker" style="border-radius: 25px;"></div>').css({
    position: 'absolute',
    top: ver - 8 + 'px',
    left: hor - 8 + 'px',
    width: '10px',
    height: '10px',
    background: '#5b5e5f'

  })
);

$（“#图像持有者”）。追加(
$（''）.css({
位置：'绝对'，
顶部：版本-8+‘px’，
左：hor-8+‘px’，
宽度：“10px”，
高度：“10px”，
背景：“#5b5e5f”
})
);

全小提琴（包括前面提到的HTML/CSS更改）：。
您可以将
.marker
附加到
#imageholder
中。然后使用
transform:translate（）
将垂直/水平/.标记线放置在单击位置的死点


$（'imageholder img'）。在（'click'，null，[$（'imageholder-img'）、$（'imageholder-img'）上，函数（e）{
e、 数据[1].css（'left'，e.offsetX==未定义？e.originalEvent.layerX:e.offsetX）；
e、 数据[0].css（'top'，e.offsetY==未定义？e.originalEvent.layerY:e.offsetY）；
$（'#imageholder'）。单击（函数（事件）{
var hor=event.offsetX，
ver=event.offsetY；
$（“.marker”）.remove（）；
$（“#图像持有人”）。追加(
$（''）.css({
位置：'绝对'，
顶部：ver+‘px’，
左：hor+‘px’，
宽度：“10px”，
高度：“10px”，
背景：“#5b5e5f”，
显示：“块”，
转换：“转换（-50%，-50%）”
})
);
});
e、 数据[0]。显示（）；
e、 数据[1]。显示（）；
$（文档）.ready（函数（）{
$（'#imageholder'）.mouseover（函数（）{
$（“.marker”）.css（“框阴影”，“0.0 3pxRGBA（0,0,0,0.5）”）；
});
$（'#imageholder'）.mouseout（函数（）{
$（“.marker”）.css（“框阴影”、“无”）；
});
});
});
#图像支架：悬停{
光标：十字线；
}
文章
在一边
图形
页脚，
标题，
hgroup，
菜单，
导航，
部分{
显示：块；
}
#影像夹组{
显示：无；
背景色：黑色；
位置：绝对位置；
}
#图像支架{
位置：相对位置；
显示：内联块；
溢出：隐藏；
}
#垂直的{
宽度：2.5px；
身高：100%；
转换：translateX（-50%）
}
#水平的{
宽度：100%；
高度：2.5px；
转换：translateY（-50%）
}
* {
框大小：边框框；
}

一些文本
其他一些文本
你是最棒的！那很好用。非常感谢。您是否注意到在您选择的解决方案中，圆圈的左上方位于您单击的位置，并且您必须手动减去
8
？我的回答将圆圈和十字光标放在鼠标点击的死点，我不再手动添加
4/4.15
（如您的代码）或减去
8
（如您选择的解决方案）。这是一个微妙的区别，但在我看来值得注意。你是对的，我改变了我对你的投票。
$("#imageholder").append(
  $('<div class="marker" style="border-radius: 25px;"></div>').css({
    position: 'absolute',
    top: ver - 8 + 'px',
    left: hor - 8 + 'px',
    width: '10px',
    height: '10px',
    background: '#5b5e5f'

  })
);