[英]Javascript | Location of X and Y clicked on image
I am trying to get the position of an x and y location that is clicked when on a image. 我试图获取在图像上时单击的x和y位置的位置。 The reason is because I want to be able to add a spot to this image which will display some information about where it is.
原因是因为我希望能够在此图像上添加一个斑点,以显示有关其位置的一些信息。 The spot will be dynamically loaded from a SQL database, but that isn't the concern at the minute.
该位置将从SQL数据库中动态加载,但目前尚无此问题。
I've had a look on Stack and I've seen a few questions where it says to use e.pageX - element.offsetLeft
for the x location and e.pageY - element.offsetTop
however placing a div on the page with a style equal to the coordinates for example <div style="position: absolute; top: 253px; left: 50px;></div>
it doesn't appear anywhere near where I want it too. Left being the x and top being the y 我看过Stack,看到了几个问题,它说在x位置使用
e.pageX - element.offsetLeft
,在e.pageY - element.offsetTop
上使用样式将div放置在页面上等于例如<div style="position: absolute; top: 253px; left: 50px;></div>
的坐标,它也不会出现在我想要的位置附近,左边是x,顶部是y
So in a summary this is what I am trying to achieve: 因此,总而言之,这就是我要实现的目标:
var $imgCont = $('#img-wrap'), $img = $('#img') $img.click(function(e) { var pos = { left: e.pageX - $img.offset().left, top: e.pageY - $img.offset().top } $('<div class="box">').css(pos).appendTo($imgCont) })
#img-wrap { position: absolute; background-color: rgba(0,0,0,.7); width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } .box { width: 16px; height: 16px; position: absolute; background: red; z-index: 100 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Click image to add boxes</p> <div id="img-wrap"> <img id='img' src=http://via.placeholder.com/400x400 "> </div>
Make sure the image is wrapped in a container with position and append to that same container 确保将图像包装在有位置的容器中并附加到该容器中
var $imgCont = $('#img-wrap'), $img = $('#img') $img.click(function(e) { var pos = { left: e.pageX - $img.offset().left, top: e.pageY - $img.offset().top } $('<div class="box">').css(pos).appendTo($imgCont) })
#img-wrap { position: relative; margin: 60px 0 0 60px; border: 1px solid green; padding: 2px; width: 400px } .box { width: 16px; height: 16px; position: absolute; background: red; z-index: 100 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Click image to add boxes</p> <div id="img-wrap"> <img id='img' src=http://via.placeholder.com/400x400 "> </div>
You could use the offsetY and offsetX of the click event argument 您可以使用click事件参数的offsetY和offsetX
<div>
<p>
Your image
</p>
<div id='container' style="position:relative">
<img id="myImage" src="http://lorempixel.com/200/120/" />
</div>
$(document).ready(function() {
$(myImage).click(
function(e) {
var $newContainer = $("<div>You Clicked here</div>");
$newContainer.css({
position: 'absolute',
top: e.offsetY,
left: e.offsetX,
height: '20px',
'background-color': "red"
});
$(container).append($newContainer)
}
);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.