根据鼠标单击坐标显示图像位置 [英] Display image position based on mouse click coordinates
问题描述
我从空白页开始，应该让用户单击页面上的任意位置以弹出图像.我正在尝试在用户单击页面内的确切坐标处显示图像. 无论何时何地，只要用户单击，我都可以在角落弹出图像.我还能够收集鼠标在页面中单击的位置的x和y坐标，但是在使那些坐标成为图像的坐标时，我遇到了麻烦.使用下面的代码，当用户单击窗口中的任意位置时，雪球图像会出现在左上角，并显示单击的x坐标. (单击更多会更改每次单击显示的x坐标).我的问题是，如何使雪球出现在点击坐标处?
I start with a blank page, and the user is supposed to click anywhere on the page to make an image pop up. I'm trying to display an image at the exact coordinates of where a user clicks within a page. I am able to get an image to pop up in the corner whenever/wherever the user clicks. I am also able to gather the x and y coordinates of where the mouse clicks within a page, but in making those coordinates the coordinates of the image, I'm having trouble. With the code I have below, when the user clicks anywhere within the window, the image of a snowball appears in the upper left hand corner, and the x coordinates of the click are displayed. (Clicking more changes the x coordinate displayed with each click). My question is, how do I get the snowball to appear at the click coordinates?
<head>
<script>
document.onclick = userClicked;
function userClicked() {
var x = event.clientX;
var y = event.clientY;
document.getElementById("xCoord").innerHTML=x;
document.getElementById("snowballAppear").style.display = '';
}
</script>
<div class "container">
<div class "picture">
<img alt="snowballAppear" id="snowballAppear" style="display: none" src="http://vignette3.wikia.nocookie.net/pottermore/images/9/99/Snowball-lrg.png/revision/latest?cb=20130412122815"/>
</div>
</div>
</head>
推荐答案
您可以将CSS元素"left"用于X，将"top"用于Y.请确保使用"position:absolute;".图片中的CSS样式.
You can use the CSS element "left" for X and "top" for Y. Make sure to have a "position: absolute;" css style in the image.
基本上，在代码中:
function userClicked() {
var x = event.clientX;
var y = event.clientY;
var snowball = document.getElementById("snowballAppear");
snowball.style.display = '';
snowball.style.position = 'absolute';
snowball.style.left = x + 'px';
snowball.style.top = y + 'px';
}
JSFiddle: https://jsfiddle.net/mxq629ng/
JSFiddle: https://jsfiddle.net/mxq629ng/
您可能希望从X和Y减去图像的高度/宽度的一半，以使其围绕鼠标居中.
You might want to subtract half the height / width of the image from the X and Y to center it around the mouse.
增加了一些评论.您可能想将事件"作为可传递的参数添加到userClicked函数中.点击事件会将事件"变量转发到您的函数中.这将使其能够在许多主要的浏览器中运行(以某种方式在V8中运行).选中此提琴，它应可在大多数主流浏览器中使用； https://jsfiddle.net/mxq629ng/1/
Addition as some comments came back; you might want to add the "event" as a passable argument in the userClicked function. The click event will forward that "event" variable into your function. This will make it work in many major browsers (somehow it works in V8). Check this Fiddle and it should work in most major browsers; https://jsfiddle.net/mxq629ng/1/
这篇关于根据鼠标单击坐标显示图像位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
