我想根据我点击的位置在我的网格图像上留下一个点。我已经了解了一般概念，但不幸的是，我的点总是比我点击的位置略高。我将如何调整这个？
https://jsfiddle.net/dr0emvkr/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
#imageholder:hover {
cursor: crosshair;
}
</style>
<style>
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
#imageholder div {
display: none;
background-color: black;
position: absolute;
}
#imageholder {
position: relative;
display: inline-block;
overflow: hidden;
}
#vertical {
width: 2.5px;
height: 100%;
}
#horizontal {
width: 100%;
height: 2.5px;
}
</style>
</head>
<body>
<h1>Some Text</h1>
<h2>Some other text</h2>
<div id="imageholder">
<div id="horizontal"></div>
<div id="vertical"></div>
<img src="http://i.imgur.com/dRUn4ip.png">
</div>
<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</div>
<script type="text/javascript">
$('#imageholder img').on('click', null, [$('#horizontal'), $('#vertical')], function(e) {
e.data[1].css('left', e.offsetX == undefined ? e.originalEvent.layerX : e.offsetX);
e.data[0].css('top', e.offsetY == undefined ? e.originalEvent.layerY : e.offsetY);
$('#imageholder').click(function(event) {
var hor = event.offsetX + 4.15,
ver = event.offsetY + 4;
$(".marker").remove();
$("body").append(
$('<div class="marker" style="border-radius: 25px;"></div>').css({
position: 'absolute',
top: ver + 'px',
left: hor + 'px',
width: '10px',
height: '10px',
background: '#5b5e5f'
})
);
});
e.data[0].show();
e.data[1].show();
$(document).ready(function() {
$('#imageholder').mouseover(function() {
$(".marker").css("box-shadow", "0 0 0 3px rgba(0, 0, 0, 0.5)");
});
$('#imageholder').mouseout(function() {
$(".marker").css("box-shadow", "none");
});
});
});
</script>
</body>
</html>
最佳答案
您可以将 .marker 附加到 #imageholder。并使用 transform: translate() 将垂直/水平/.marker 线放置在您单击位置的死点。
$('#imageholder img').on('click', null, [$('#horizontal'), $('#vertical')], function(e) {
e.data[1].css('left', e.offsetX == undefined ? e.originalEvent.layerX : e.offsetX);
e.data[0].css('top', e.offsetY == undefined ? e.originalEvent.layerY : e.offsetY);
$('#imageholder').click(function(event) {
var hor = event.offsetX,
ver = event.offsetY;
$(".marker").remove();
$("#imageholder").append(
$('<div class="marker" style="border-radius: 25px;"></div>').css({
position: 'absolute',
top: ver + 'px',
left: hor + 'px',
width: '10px',
height: '10px',
background: '#5b5e5f',
display: 'block',
transform: 'translate(-50%,-50%)'
})
);
});
e.data[0].show();
e.data[1].show();
$(document).ready(function() {
$('#imageholder').mouseover(function() {
$(".marker").css("box-shadow", "0 0 0 3px rgba(0, 0, 0, 0.5)");
});
$('#imageholder').mouseout(function() {
$(".marker").css("box-shadow", "none");
});
});
});#imageholder:hover {
cursor: crosshair;
}
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
#imageholder div {
display: none;
background-color: black;
position: absolute;
}
#imageholder {
position: relative;
display: inline-block;
overflow: hidden;
}
#vertical {
width: 2.5px;
height: 100%;
transform: translateX(-50%)
}
#horizontal {
width: 100%;
height: 2.5px;
transform: translateY(-50%)
}
* {
box-sizing:border-box;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Some Text</h1>
<h2>Some other text</h2>
<div id="imageholder">
<div id="horizontal"></div>
<div id="vertical"></div>
<img src="http://i.imgur.com/dRUn4ip.png">
</div>
<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>关于javascript - 在图像上留下点onclick，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45133325/